/**
 * Icons Fallback - If Phosphor Icons fail to load
 * 
 * @package Bargtunes
 */

/* Ensure icons are displayed */
.ph,
[class^="ph-"],
[class*=" ph-"] {
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* If Phosphor font loads, use it */
@font-face {
    font-family: "Phosphor";
    src: url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/Phosphor.woff2") format("woff2"),
         url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/Phosphor.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Try to use Phosphor font first */
.ph::before,
[class^="ph-"]::before,
[class*=" ph-"]::before {
    font-family: "Phosphor", sans-serif;
}

/* Fallback: If icons don't load, show Unicode symbols */
.ph-play-fill::before {
    content: "▶";
}

.ph-pause-fill::before {
    content: "⏸";
}

.ph-skip-back-fill::before {
    content: "⏮";
}

.ph-skip-forward-fill::before {
    content: "⏭";
}

.ph-speaker-high::before,
.ph-speaker-high-fill::before {
    content: "♪";
    font-size: 1.1em;
}

.ph-speaker-low::before,
.ph-speaker-low-fill::before {
    content: "♪";
    font-size: 1.1em;
    opacity: 0.7;
}

.ph-speaker-slash::before,
.ph-speaker-slash-fill::before {
    content: "⊗";
    font-size: 1.1em;
}

.ph-x::before {
    content: "✕";
}

.ph-instagram-logo::before {
    content: "IG";
    font-family: 'Poppins', sans-serif;
    font-size: 0.55em;
    font-weight: 600;
}

.ph-spotify-logo::before {
    content: "♫";
    font-size: 1.1em;
}

.ph-youtube-logo::before {
    content: "YT";
    font-family: 'Poppins', sans-serif;
    font-size: 0.55em;
    font-weight: 600;
}

.ph-soundcloud-logo::before {
    content: "SC";
    font-family: 'Poppins', sans-serif;
    font-size: 0.55em;
    font-weight: 600;
}

.ph-arrow-square-out::before {
    content: "↗";
}

.ph-music-notes-simple::before {
    content: "🎵";
}

.ph-arrow-right::before {
    content: "→";
}