.cr-avatar-widget {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    --cr-avatar-size: 150px;
    --cr-text-spacing: 20px;
    --cr-animation-duration: 10s;
    --cr-animation-direction: normal;
    --cr-animation-play-state: running;
}

.cr-avatar-image {
    width: var(--cr-avatar-size);
    height: var(--cr-avatar-size);
    border-radius: 50%; /* Default to circle, Elementor overrides if needed */
    overflow: hidden;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Fallback */
}

.cr-avatar-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cr-avatar-text-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Size = Avatar Size + (Spacing * 2) + Padding for text height (approx 40-60px) */
    /* We use a large enough fixed buffer. */
    width: calc(var(--cr-avatar-size) + (var(--cr-text-spacing) * 2) + 100px);
    height: calc(var(--cr-avatar-size) + (var(--cr-text-spacing) * 2) + 100px);
    z-index: 1;
    pointer-events: none;
    animation: cr-avatar-spin var(--cr-animation-duration) linear infinite;
    animation-direction: var(--cr-animation-direction);
    animation-play-state: var(--cr-animation-play-state);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cr-avatar-widget:hover .cr-avatar-text-ring.cr-paused-on-hover {
    animation-play-state: paused;
}

.cr-avatar-text-ring svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    /* Important: Ensure SVG spins around its center */
    transform-origin: center center;
}

.cr-avatar-text-path {
    fill: currentColor;
    /* Font styles are inherited from the widget wrapper or set explicitly via Elementor */
}

@keyframes cr-avatar-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}