/**
 * Jooy Audio — botão circular play/stop com anel de carregamento.
 *
 * Estados aplicados pelo JS no wrapper .jooy-audio:
 *   is-loading  → anel girando em volta do botão
 *   is-playing  → ícone de stop
 *   is-error    → anel estático vermelho
 *
 * Todas as cores/medidas saem de custom properties, que é o que os controles
 * de estilo do widget do Elementor sobrescrevem.
 */

.jooy-audio {
    --jooy-audio-size: 64px;
    --jooy-audio-icon-size: 38%;

    --jooy-audio-bg: #111111;
    --jooy-audio-bg-hover: #2b2b2b;
    --jooy-audio-bg-playing: var(--jooy-audio-bg-hover);

    --jooy-audio-icon: #ffffff;
    --jooy-audio-icon-hover: var(--jooy-audio-icon);
    --jooy-audio-icon-playing: var(--jooy-audio-icon);

    --jooy-audio-ring: var(--jooy-audio-bg);
    --jooy-audio-ring-track: transparent;
    --jooy-audio-ring-thickness: 3px;
    --jooy-audio-ring-gap: 4px;
    --jooy-audio-ring-speed: 0.9s;

    display: inline-block;
    line-height: 0;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   Botão
   -------------------------------------------------------------------------- */

.jooy-audio-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--jooy-audio-size);
    height: var(--jooy-audio-size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--jooy-audio-bg);
    color: var(--jooy-audio-icon);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.jooy-audio-btn:hover {
    background: var(--jooy-audio-bg-hover);
    color: var(--jooy-audio-icon-hover);
}

.jooy-audio-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: calc(var(--jooy-audio-ring-gap) + var(--jooy-audio-ring-thickness));
}

.jooy-audio.is-playing .jooy-audio-btn {
    background: var(--jooy-audio-bg-playing);
    color: var(--jooy-audio-icon-playing);
}

/* --------------------------------------------------------------------------
   Ícones — empilhados na mesma célula do grid
   -------------------------------------------------------------------------- */

.jooy-audio-icon {
    grid-area: 1 / 1;
    width: var(--jooy-audio-icon-size);
    line-height: 0;
}

.jooy-audio-icon svg {
    display: block;
    width: 100%;
    height: auto;
    fill: currentColor;
}

/* Compensação óptica: o triângulo parece deslocado à esquerda quando centrado. */
.jooy-audio-icon--play {
    transform: translateX(6%);
}

.jooy-audio-icon--stop {
    display: none;
}

.jooy-audio.is-playing .jooy-audio-icon--play {
    display: none;
}

.jooy-audio.is-playing .jooy-audio-icon--stop {
    display: block;
}

/* --------------------------------------------------------------------------
   Anel de carregamento
   .jooy-audio-ring        → círculo completo (trilha)
   .jooy-audio-ring::after → arco que gira
   -------------------------------------------------------------------------- */

.jooy-audio-ring {
    position: absolute;
    inset: calc(var(--jooy-audio-ring-gap) * -1);
    border: var(--jooy-audio-ring-thickness) solid var(--jooy-audio-ring-track);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.jooy-audio-ring::after {
    content: "";
    position: absolute;
    inset: calc(var(--jooy-audio-ring-thickness) * -1);
    border: var(--jooy-audio-ring-thickness) solid transparent;
    border-top-color: var(--jooy-audio-ring);
    border-radius: 50%;
}

.jooy-audio.is-loading .jooy-audio-ring {
    opacity: 1;
}

.jooy-audio.is-loading .jooy-audio-ring::after {
    animation: jooy-audio-spin var(--jooy-audio-ring-speed) linear infinite;
}

@keyframes jooy-audio-spin {
    to {
        transform: rotate(360deg);
    }
}

/* --------------------------------------------------------------------------
   Erro (arquivo ausente, formato não suportado, bloqueio do navegador)
   -------------------------------------------------------------------------- */

.jooy-audio.is-error .jooy-audio-ring {
    opacity: 1;
    border-color: #d63638;
}

.jooy-audio.is-error .jooy-audio-ring::after {
    display: none;
}

/* --------------------------------------------------------------------------
   Placeholder do editor do Elementor (sem produto no contexto)
   -------------------------------------------------------------------------- */

.jooy-audio.is-placeholder .jooy-audio-btn {
    cursor: default;
    opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Movimento reduzido — pulsa em vez de girar
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .jooy-audio-btn,
    .jooy-audio-ring {
        transition: none;
    }

    .jooy-audio.is-loading .jooy-audio-ring::after {
        border-color: var(--jooy-audio-ring);
        animation: jooy-audio-pulse 1.2s ease-in-out infinite;
    }

    @keyframes jooy-audio-pulse {
        0%,
        100% {
            opacity: 0.25;
        }
        50% {
            opacity: 1;
        }
    }
}