/* --------------------------------------------------------------
   PIE CHART WIDGET – FULLY RESPONSIVE & ANIMATED
   -------------------------------------------------------------- */
.pie-chart-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.pie-chart-layout-left,
.pie-chart-layout-right { flex-direction: row; }
.pie-chart-layout-top,
.pie-chart-layout-bottom { flex-direction: column; }
.pie-chart-layout-left .pie-chart-container,
.pie-chart-layout-right .pie-chart-container { flex: 0 0 auto; }
.pie-chart-text { flex: 1; min-width: 150px; }

/* SVG Container */
.pie-chart-svg { width: 100%; height: 100%; }

/* Dynamic radius & circumference */
.pie-chart-container {
    --ring-radius: 90;
    --circumference: calc(2 * 3.1415926535 * var(--ring-radius));
}

/* Thick (default) */
.pie-arc-thick .pie-ring-bg,
.pie-arc-thick .pie-ring-progress { stroke-width: 18; }
.pie-arc-thick .pie-ring-outer { r: 96; }
.pie-arc-thick .pie-inner-circle { r: 70; }

/* Thin */
.pie-arc-thin .pie-ring-bg,
.pie-arc-thin .pie-ring-progress { stroke-width: 8; }
.pie-arc-thin { --ring-radius: 80; }
.pie-arc-thin .pie-ring-outer { r: 86; }
.pie-arc-thin .pie-inner-circle { r: 70; }

/* Rings */
.pie-ring-bg { fill: none; stroke: #ffe0d1; }
.pie-ring-progress {
    fill: none;
    stroke: #ff6200;
    stroke-linecap: round;
    stroke-dasharray: 0 var(--circumference);
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dasharray 1.5s ease-in-out;
}
.pie-ring-outer { fill: none; stroke: #ff6200; stroke-width: 1; opacity: 0.6; }
.pie-inner-circle { fill: #ff6200; }

/* Text */
.pie-percentage {
    font-size: 36px;
    font-weight: 700;
    fill: #ffffff;
    text-anchor: middle;
    dominant-baseline: middle;
}
.pie-title { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.pie-subtitle { margin: 0 0 8px; font-size: 14px; opacity: .8; }
.pie-description { margin: 0; font-size: 14px; line-height: 1.5; }
/* --------------------------------------------------------------
   PIE CHART WIDGET – CUSTOM BACKGROUND RING THICKNESS
   -------------------------------------------------------------- */
.pie-chart-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.pie-chart-layout-left,
.pie-chart-layout-right { flex-direction: row; }
.pie-chart-layout-top,
.pie-chart-layout-bottom { flex-direction: column; }
.pie-chart-layout-left .pie-chart-container,
.pie-chart-layout-right .pie-chart-container { flex: 0 0 auto; }
.pie-chart-text { flex: 1; min-width: 150px; }

/* SVG */
.pie-chart-svg { width: 100%; height: 100%; }

/* Dynamic radius */
.pie-chart-container {
    --ring-radius: 90;
    --circumference: calc(2 * 3.1415926535 * var(--ring-radius));
}

/* ============================================================= */
/* THICK PROGRESS ARC (18px) */
/* ============================================================= */
.pie-arc-thick .pie-ring-progress { stroke-width: 18; }
.pie-arc-thick .pie-ring-outer { r: 96; }
.pie-arc-thick .pie-inner-circle { r: 70; }

/* ============================================================= */
/* THIN PROGRESS ARC (8px) */
/* ============================================================= */
.pie-arc-thin .pie-ring-progress { stroke-width: 12; }
.pie-arc-thin { --ring-radius: 80; }
.pie-arc-thin .pie-ring-outer { r: 86; }
.pie-arc-thin .pie-inner-circle { r: 70; }

/* ============================================================= */
/* BACKGROUND RING – CONTROLLED BY SLIDER */
/* ============================================================= */
.pie-ring-bg {
    fill: none;
    stroke: #ffe0d1;
    stroke-width: 6;           /* default – overridden by inline style */
    opacity: 0.7;
}

/* PROGRESS RING (animated) */
.pie-ring-progress {
    fill: none;
    stroke: #ff6200;
    stroke-linecap: round;
    stroke-dasharray: 0 var(--circumference);
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dasharray 1.5s ease-in-out;
}

/* Outer dashed ring */
.pie-ring-outer {
    fill: none;
    stroke: #ff6200;
    stroke-width: 1;
    opacity: 0.6;
    stroke-dasharray: 2 6;
}

/* Inner circle */
.pie-inner-circle { fill: #ff6200; }

/* Percentage */
.pie-percentage {
    font-size: 36px;
    font-weight: 700;
    fill: #ffffff;
    text-anchor: middle;
    dominant-baseline: middle;
}

/* Text */
.pie-title    { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.pie-subtitle { margin: 0 0 8px; font-size: 14px; opacity: .8; }
.pie-description { margin: 0; font-size: 14px; line-height: 1.5; }