/* YouTube Embedder - Frontend Styles */

.youtube-embed-wrapper {
    margin: 1.5em 0;
    position: relative;
}

/* Responsive Container */
.youtube-embed-wrapper.youtube-responsive {
    width: 100%;
    max-width: 100%;
}

.youtube-embed-container {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    background: #000;
}

.youtube-embed-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Playlist Specific Styles */
.youtube-playlist-wrapper {
    /* Additional styles for playlists if needed */
}

/* Center Alignment Option */
.youtube-embed-wrapper.youtube-center {
    margin-left: auto;
    margin-right: auto;
}

/* Custom Width Constraints */
.youtube-embed-wrapper.youtube-max-width-480 {
    max-width: 480px;
}

.youtube-embed-wrapper.youtube-max-width-640 {
    max-width: 640px;
}

.youtube-embed-wrapper.youtube-max-width-800 {
    max-width: 800px;
}

.youtube-embed-wrapper.youtube-max-width-960 {
    max-width: 960px;
}

.youtube-embed-wrapper.youtube-max-width-1280 {
    max-width: 1280px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .youtube-embed-wrapper {
        margin: 1em 0;
    }
}

@media (max-width: 480px) {
    .youtube-embed-wrapper {
        margin: 0.5em 0;
    }
}

/* Loading State (if needed for future enhancements) */
.youtube-embed-wrapper.loading {
    background: #f0f0f0;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.youtube-embed-wrapper.loading::before {
    content: "Loading...";
    color: #666;
}