.db60-audio-player {
    --db60-audio-accent: #ea9c2a;
    --db60-audio-center: #0a0806;

    display: flex;
    justify-content: center;
    width: 100%;
}

.db60-audio-player .db60-audio-player__button {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--db60-audio-accent);
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.db60-audio-player .db60-audio-player__button:hover,
.db60-audio-player .db60-audio-player__button:focus,
.db60-audio-player .db60-audio-player__button:active {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--db60-audio-accent);
}

.db60-audio-player__visual {
    position: relative;
    display: block;
    width: clamp(140px, 11.46vw, 220px);
    aspect-ratio: 1;
    border-radius: 50%;
    transition:
        transform 180ms ease,
        filter 180ms ease;
}

.db60-audio-player__icon {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

.db60-audio-player .db60-audio-player__button:hover .db60-audio-player__visual {
    transform: scale(1.035);
    filter: brightness(1.08);
}

.db60-audio-player .db60-audio-player__button:focus-visible {
    outline: none;
}

.db60-audio-player .db60-audio-player__button:focus-visible
    .db60-audio-player__visual {
    outline: 2px solid var(--db60-audio-accent);
    outline-offset: 7px;
}

.db60-audio-player__label {
    display: block;
    margin-top: 12px;
    color: var(--db60-audio-accent);
    font-family: "Montserrat", sans-serif;
    font-size: clamp(16px, 1.2vw, 23px);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.db60-audio-player__wave {
    display: block;
    width: clamp(130px, 9vw, 173px);
    height: auto;
    margin-top: 10px;
    user-select: none;
    -webkit-user-drag: none;
}

.db60-audio-player__visual::before,
.db60-audio-player__visual::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: none;
    content: "";
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.db60-audio-player[data-state="playing"]
    .db60-audio-player__visual::before,
.db60-audio-player[data-state="loading"]
    .db60-audio-player__visual::before,
.db60-audio-player[data-state="error"]
    .db60-audio-player__visual::before {
    display: block;
    width: 49%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--db60-audio-center);
}

.db60-audio-player[data-state="playing"]
    .db60-audio-player__visual::after {
    display: block;
    width: 17%;
    height: 23%;
    background: linear-gradient(
        90deg,
        var(--db60-audio-accent) 0 34%,
        transparent 34% 66%,
        var(--db60-audio-accent) 66% 100%
    );
    filter: drop-shadow(0 0 7px rgb(234 156 42 / 75%));
}

.db60-audio-player[data-state="loading"]
    .db60-audio-player__visual::after {
    display: block;
    width: 19%;
    aspect-ratio: 1;
    border: 3px solid rgb(234 156 42 / 35%);
    border-top-color: var(--db60-audio-accent);
    border-radius: 50%;
    animation: db60-audio-spin 750ms linear infinite;
}

.db60-audio-player[data-state="error"]
    .db60-audio-player__visual::after {
    display: grid;
    place-items: center;
    width: 22%;
    height: 28%;
    color: var(--db60-audio-accent);
    font-family: Arial, sans-serif;
    font-size: clamp(22px, 2vw, 38px);
    font-weight: 700;
    line-height: 1;
    content: "!";
}

@keyframes db60-audio-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@media (max-width: 1024px) {
    .db60-audio-player__visual {
        width: clamp(150px, 20vw, 190px);
    }

    .db60-audio-player__label {
        font-size: clamp(17px, 2.3vw, 22px);
    }

    .db60-audio-player__wave {
        width: clamp(135px, 18vw, 170px);
    }
}

@media (max-width: 640px) {
    .db60-audio-player__visual {
        width: clamp(130px, 38vw, 165px);
    }

    .db60-audio-player__label {
        font-size: clamp(14px, 4vw, 17px);
        letter-spacing: 0.14em;
    }

    .db60-audio-player__wave {
        width: clamp(120px, 35vw, 150px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .db60-audio-player__visual {
        transition: none;
    }

    .db60-audio-player[data-state="loading"]
        .db60-audio-player__visual::after {
        animation: none;
    }
}

/* Override Elementor global button styles */
.db60-sound__player button.db60-audio-player__button,
.db60-sound__player button.db60-audio-player__button:hover,
.db60-sound__player button.db60-audio-player__button:focus,
.db60-sound__player button.db60-audio-player__button:focus-visible,
.db60-sound__player button.db60-audio-player__button:active {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--db60-audio-accent) !important;
}

/* Tablet and mobile: return the player to normal document flow */
@media (max-width: 1024px) {
    .db60-sound__player {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 32px auto;
        transform: none !important;
        align-self: center;
        z-index: 20;
    }
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .db60-sound__player {
        width: 100% !important;
        margin: 24px auto;
        padding-inline: 16px;
    }
}