/* =============================================
   Circular Infographic Widget - Styles v2
   Center = STATIC | Outer circles = AUTO ORBIT
   ============================================= */

.ciw-wrapper {
    width: 100%;
    padding: 20px 0;
    font-family: inherit;
    user-select: none;
}

.ciw-orbit-container {
    position: relative;
    width: min(580px, 88vw);
    height: min(580px, 88vw);
    margin: 0 auto;
}

/* ══ CENTER CIRCLE — fully static ══ */
.ciw-center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36%;
    height: 36%;
    border-radius: 50%;
    background-color: #ffffff;
    border: 3px solid #e0e0e0;
    box-shadow: 0 4px 30px rgba(0,0,0,0.12);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

.ciw-center-inner { width: 100%; padding: 4px; }

.ciw-center-title {
    font-size: clamp(10px, 2vw, 17px);
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 2px 0;
    line-height: 1.2;
    letter-spacing: 0.5px;
}

.ciw-center-subtitle {
    font-size: clamp(9px, 1.6vw, 14px);
    font-weight: 700;
    margin-bottom: 5px !important;
}

.ciw-center-desc {
    font-size: clamp(7px, 1.1vw, 10px);
    color: #555;
    margin: 0;
    line-height: 1.4;
}

/* ══ ORBIT RING wrapper ══ */
.ciw-orbit-ring {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ══ EACH STEP ITEM orbits independently ══ */
.ciw-step-orbit-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(175px, 29vw);
    height: min(175px, 29vw);
    margin-top: calc(min(-175px, -29vw) / 2);
    margin-left: calc(min(-175px, -29vw) / 2);
    border-radius: 50%;
    pointer-events: none;
    animation: ciw-orbit linear infinite;
    animation-play-state: running;
    --orbit-radius: min(200px, 33vw);
}

@keyframes ciw-orbit {
    0%   { transform: rotate(var(--start-angle)) translateX(var(--orbit-radius)) rotate(calc(-1 * var(--start-angle))); }
    100% { transform: rotate(calc(var(--start-angle) + 360deg)) translateX(var(--orbit-radius)) rotate(calc(-1 * (var(--start-angle) + 360deg))); }
}

@keyframes ciw-orbit-reverse {
    0%   { transform: rotate(var(--start-angle)) translateX(var(--orbit-radius)) rotate(calc(-1 * var(--start-angle))); }
    100% { transform: rotate(calc(var(--start-angle) - 360deg)) translateX(var(--orbit-radius)) rotate(calc(-1 * (var(--start-angle) - 360deg))); }
}

.ciw-orbit-ring.ciw-direction-reverse .ciw-step-orbit-item {
    animation-name: ciw-orbit-reverse;
}

/* ══ STEP CIRCLE (colored ball) ══ */
.ciw-step-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
    overflow: hidden;
    position: relative;
    cursor: default;
    pointer-events: none;
}

.ciw-step-image-wrap {
    width: 46px;
    height: 46px;
    margin-bottom: 5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ciw-step-image {
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.ciw-step-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ciw-step-title {
    font-size: clamp(8px, 1.5vw, 13px);
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 1px 0;
    line-height: 1.1;
}

.ciw-step-subtitle { font-size: clamp(7px, 1.2vw, 11px); font-weight: 700; }

.ciw-step-desc {
    font-size: clamp(6px, 0.95vw, 9px);
    color: #2a2a2a;
    margin: 3px 0 0;
    line-height: 1.35;
    text-align: center;
}

/* ══ MOBILE — grid, animation off ══ */
@media (max-width: 700px) {
    .ciw-orbit-container {
        position: static;
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 10px;
        box-sizing: border-box;
    }

    .ciw-center-circle {
        position: static;
        transform: none;
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        grid-column: 2;
        grid-row: 2;
        border-radius: 50%;
    }

    .ciw-orbit-ring {
        display: contents !important;
        animation: none !important;
    }

    .ciw-step-orbit-item {
        position: static !important;
        transform: none !important;
        animation: none !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 !important;
        margin: 0 !important;
        border-radius: 50%;
        pointer-events: auto;
    }

    .ciw-step-orbit-item:nth-child(1) { grid-column: 2; grid-row: 1; }
    .ciw-step-orbit-item:nth-child(2) { grid-column: 3; grid-row: 1; }
    .ciw-step-orbit-item:nth-child(3) { grid-column: 3; grid-row: 2; }
    .ciw-step-orbit-item:nth-child(4) { grid-column: 2; grid-row: 3; }
    .ciw-step-orbit-item:nth-child(5) { grid-column: 1; grid-row: 3; }
    .ciw-step-orbit-item:nth-child(6) { grid-column: 1; grid-row: 2; }

    .ciw-step-circle { padding: 8px 5px; cursor: default; }
    .ciw-step-image-wrap, .ciw-step-image { width: 34px; height: 34px; }
    .ciw-step-title { font-size: 10px; }
    .ciw-step-desc { display: none; }
    .ciw-center-title { font-size: 12px; }
    .ciw-center-desc { display: none; }
}

@media (max-width: 420px) {
    .ciw-orbit-container { grid-template-columns: repeat(2, 1fr); }
    .ciw-center-circle { grid-column: 1/-1; grid-row: 1; border-radius: 14px; aspect-ratio: auto; height: 80px; }
    .ciw-step-orbit-item { grid-column: span 1 !important; grid-row: auto !important; }
}

/* Elementor editor: freeze so it's editable */
.elementor-editor-active .ciw-step-orbit-item {
    animation-play-state: paused !important;
}