@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

.youtube-audio-player-wrapper {
    font-family: 'Inter', sans-serif;
    display: flex;
    background: transparent;
    width: 100%;
    max-width: 800px;
    margin: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.yap-player-ui {
    background: #ffffff;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
    width: 320px;
    border-right: 1px solid #f0f0f0;
}

.yap-playlist {
    flex-grow: 1;
    max-height: 480px;
    overflow-y: auto;
    background-color: #FDFDFD;
}

/* --- Player UI Elements --- */
.yap-album-art {
    width: 180px;
    height: 180px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.yap-track-info {
    margin-bottom: 15px;
    width: 100%;
}

.yap-track-info .yap-title {
    font-weight: 700;
    font-size: 18px;
    color: #333;
    margin-bottom: 5px;
}

.yap-track-info .yap-artist {
    font-size: 14px;
    color: #888;
}

/* --- Progress & Time --- */
.yap-progress-wrapper { width: 100%; margin-bottom: 10px; }
.yap-progress-bar { width: 100%; height: 6px; background-color: #EEE; border-radius: 3px; cursor: pointer; overflow: hidden; }
.yap-progress-fill { width: 0%; height: 100%; background-color: #5e35b1; border-radius: 3px; transition: width 0.2s linear; }
.yap-time-display { display: flex; justify-content: space-between; font-size: 12px; color: #aaa; margin-top: 5px; }

/* --- Controls --- */
.yap-controls {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 15px;
}

.yap-controls button, .yap-volume-btn {
    background: none; border: none; cursor: pointer; color: #777; font-size: 16px;
    padding: 8px; border-radius: 50%; transition: background-color 0.2s, color 0.2s;
}

.yap-controls button:hover, .yap-volume-btn:hover { background-color: #f5f5f5; }

.yap-controls button.yap-play-pause { font-size: 28px; color: #5e35b1; }
.yap-controls button.active { color: #5e35b1; }

/* --- Volume Control --- */
.yap-volume-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.yap-volume-slider { flex-grow: 1; height: 4px; background: #eee; border-radius: 2px; cursor: pointer; }
.yap-volume-fill { width: 100%; height: 100%; background: #999; border-radius: 2px; }

/* --- Playlist --- */
.yap-playlist-item { padding: 15px 20px; font-size: 14px; color: #444; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background-color 0.2s; }
.yap-playlist-item:last-child { border-bottom: none; }
.yap-playlist-item:hover { background-color: #f5f5f5; }
.yap-playlist-item.active { background-color: #f3e5f5; color: #5e35b1; font-weight: 700; }

/* --- Responsive --- */
@media (max-width: 767px) {
    .youtube-audio-player-wrapper { flex-direction: column; }
    .yap-player-ui { width: 100%; border-right: none; }
    .yap-playlist { max-height: 200px; }
}

.yap-youtube-player { width: 1px; height: 1px; opacity: 0; position: absolute; }
.elementor-control-get_data_button .yap-get-data-button { width: 100%; }