/* Chromecast and AirPlay Button Styles */

/* Chromecast button */
.btn-chromecast {
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-chromecast:hover {
    background: var(--color-bg-hover);
    color: var(--color-accent);
}

.btn-chromecast svg {
    width: 20px;
    height: 20px;
}

/* AirPlay button */
.btn-airplay {
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-airplay:hover {
    background: var(--color-bg-hover);
    color: var(--color-accent);
}

.btn-airplay svg {
    width: 20px;
    height: 20px;
}

/* Cast available indicator */
.cast-available {
    position: relative;
}

.cast-available::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #4285f4;
    border-radius: 50%;
    animation: pulse-cast 2s infinite;
}

@keyframes pulse-cast {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Chromecast connecting state */
.cast-connecting svg {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Hide Chromecast button if not available */
.btn-chromecast.hidden {
    display: none;
}

/* Hide AirPlay button if not available */
.btn-airplay.hidden {
    display: none;
}