/* Placeholder Images using CSS */

/* Movie Posters */
.content-poster img {
    background: linear-gradient(135deg, #1a1a1a, #333);
    position: relative;
}

.content-poster img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    opacity: 0.1;
}

.content-poster img::after {
    content: '🎬';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: #ff6b6b;
}

/* Channel Logos */
.channel-card img {
    background: #333;
    border-radius: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.channel-card img::after {
    content: '📺';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
}

/* Fallback for missing images */
img[src*="movie1.jpg"]::after { content: 'ACTION'; font-size: 1rem; color: #ff6b6b; }
img[src*="movie2.jpg"]::after { content: 'DRAMA'; font-size: 1rem; color: #ff6b6b; }
img[src*="movie3.jpg"]::after { content: 'COMEDY'; font-size: 1rem; color: #ff6b6b; }
img[src*="movie4.jpg"]::after { content: 'THRILLER'; font-size: 1rem; color: #ff6b6b; }

img[src*="hbo.png"]::after { content: 'HBO'; font-size: 0.8rem; color: #fff; }
img[src*="netflix.png"]::after { content: 'NETFLIX'; font-size: 0.7rem; color: #e50914; }
img[src*="espn.png"]::after { content: 'ESPN'; font-size: 0.8rem; color: #fff; }
img[src*="cnn.png"]::after { content: 'CNN'; font-size: 0.8rem; color: #cc0000; }
img[src*="disney.png"]::after { content: 'DISNEY'; font-size: 0.7rem; color: #0066cc; }
img[src*="discovery.png"]::after { content: 'DISCOVERY'; font-size: 0.6rem; color: #fff; }

/* Image error handling */
img {
    background: #333;
    color: transparent;
}

img:not([src]),
img[src=""],
img[src*="placeholder"] {
    background: linear-gradient(135deg, #333, #555);
    position: relative;
}

img:not([src])::after,
img[src=""]::after,
img[src*="placeholder"]::after {
    content: '🖼️';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: #666;
}