/* ================================
   SBS RADIO — Styles
   ================================ */

.radio-wrap {
    position: relative;
    flex: 0 0 auto;
}

.radio-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 14px 6px 8px;
    border-radius: 999px;
    border: 1px solid rgba(254, 0, 0, 0.45);
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.radio-btn:hover {
    background: rgba(254, 0, 0, 0.10);
    border-color: rgba(254, 0, 0, 0.8);
}

.radio-btn__label {
    font-family: "Doto", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #fff;
    line-height: 1;
}

/* ---- Pulse container ---- */
.radio-btn__pulse {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Inner solid dot — flex container too */
.radio-pulse__dot {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -6px;
    margin-left: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FE0000;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Two pulsing rings — also explicitly centered */
.radio-pulse__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -6px;
    margin-left: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid #FE0000;
    opacity: 0;
    animation: pulseRing 2s ease-out infinite;
}

.radio-pulse__ring:nth-child(1) { animation-delay: 0s; }
.radio-pulse__ring:nth-child(2) { animation-delay: 0.9s; }

@keyframes pulseRing {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(3.2); opacity: 0;   }
}

/* ---- SVG icons — inside the dot, centered via flex ---- */
.radio-pulse__icon {
    position: absolute;
    z-index: 2;
    width: 7px;
    height: 7px;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    display: none;
}

/* default — play visible */
.radio-pulse__icon--play  { display: block; }
.radio-pulse__icon--pause { display: none;  }

/* playing — pause visible */
.radio-btn__pulse.is-playing .radio-pulse__icon--play  { display: none;  }
.radio-btn__pulse.is-playing .radio-pulse__icon--pause { display: block; }

/* hover / touch — reveal */
.radio-btn:hover .radio-pulse__icon,
.radio-btn.touched .radio-pulse__icon {
    opacity: 1;
}

/* Playing state */
.radio-btn__pulse.is-playing .radio-pulse__dot {
    background: #ff4444;
    box-shadow: 0 0 6px rgba(254, 0, 0, 0.8);
}

.radio-btn__pulse.is-playing .radio-pulse__ring {
    animation-duration: 1.2s;
    border-color: #ff4444;
}

/* ================================
   MOBILE
   ================================ */
@media (max-width: 740px) {
    .radio-btn__label { font-size: 10px; letter-spacing: 1px; }
    .radio-btn { padding: 6px 10px 6px 8px; gap: 7px; }
    .radio-label--full { display: none; }
    .radio-btn__label-wrap { min-width: 35px; }
}

/* ================================
   LABEL ANIMATION
   ================================ */
.radio-btn__label-wrap {
    position: relative;
    overflow: hidden;
    height: 14px;
    display: flex;
    align-items: center;
    min-width: 95px;
}

@media (max-width: 740px) {
    .radio-btn__label-wrap {
        min-width: 35px;
    }
}

.radio-btn__label,
.radio-btn__track {
    position: absolute;
    white-space: nowrap;
    font-family: "Doto", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #fff;
    line-height: 1;
}

/* slide out down */
@keyframes slideOutDown {
    0%   { transform: translateY(0);    opacity: 1; }
    100% { transform: translateY(16px); opacity: 0; }
}

/* slide in from left — marquee, stops at center */
@keyframes marqueeIn {
    0%   { transform: translateX(120%); opacity: 1; }
    100% { transform: translateX(0);    opacity: 1; }
}

/* slide in from top */
@keyframes slideInTop {
    0%   { transform: translateY(-16px); opacity: 0; }
    100% { transform: translateY(0);     opacity: 1; }
}

.radio-btn__label.anim-out,
.radio-btn__track.anim-out {
    animation: slideOutDown 0.3s ease forwards;
}

.radio-btn__track.anim-marquee {
    animation: marqueeIn 4s linear forwards;
}

.radio-btn__label.anim-in {
    animation: slideInTop 0.3s ease forwards;
}