/* --- Font Imports from your Design --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300&display=swap');

/* --- Main Player Container --- */
.audio-player-container-dark {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    background-color: #000000;
    color: #FFFFFF;
    text-align: center;
}

/* --- Typography based on your specs --- */
.track-title-dark {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 38.4px;
    margin: 0 0 10px 0; /* 10px gap below */
}

.track-subtitle-dark {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 38.4px;
    margin: 0;
    color: #EAEAEA;
}

.quote-text-dark {
    font-family: 'Readex Pro', sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 29.25px;
    max-width: 904px;
    margin: 60px 0; /* Adjusted spacing for better flow */
    color: #FFFFFF;
}

/* --- Player Controls --- */
.player-controls-dark {
    width: 100%;
    max-width: 500px;
    margin-top: 40px; /* Spacing between title and player */
}
.progress-bar-wrapper-dark { display: flex; align-items: center; gap: 15px; }
.time-display-dark { font-size: 14px; font-family: 'Readex Pro', sans-serif; color: #FFFFFF; }
.progress-bar-dark { flex-grow: 1; height: 3px; background-color: rgba(192, 168, 151, 0.3); cursor: pointer; }
.progress-dark { height: 100%; width: 0%; background-color: #A168FF; } /* Purple progress color */
.control-buttons-dark { display: flex; justify-content: center; align-items: center; gap: 25px; margin-top: 20px; }
.control-buttons-dark button { background: none; border: none; padding: 0; cursor: pointer; color: #FFFFFF; }

.play-pause-btn {
    width: 40px; height: 40px; border: 1px solid #FFFFFF; border-radius: 50%;
    position: relative;
}
.icon-play::before {
    content: ''; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%);
    width: 0; height: 0;
    border-top: 8px solid transparent; border-bottom: 8px solid transparent;
    border-left: 14px solid #FFFFFF;
}
.icon-pause::before, .icon-pause::after {
    content: ''; position: absolute; top: 50%; transform: translateY(-50%);
    width: 4px; height: 16px; background-color: #FFFFFF;
}
.icon-pause::before { left: 12px; }
.icon-pause::after { right: 12px; }

.icon-next, .icon-prev { width: 24px; height: 24px; position: relative; }
.icon-next::before, .icon-prev::before {
    content: ''; position: absolute; top: 50%; transform: translateY(-50%);
    width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.icon-next::after, .icon-prev::after {
    content: ''; position: absolute; top: 50%; transform: translateY(-50%);
    width: 3px; height: 16px; background-color: #FFFFFF;
}
.icon-next::before { border-left: 14px solid #FFFFFF; right: 0; }
.icon-next::after { left: 0; }
.icon-prev::before { border-right: 14px solid #FFFFFF; left: 0; }
.icon-prev::after { right: 0; }
.shuffle-btn, .repeat-btn { font-size: 20px; }
.shuffle-btn.active, .repeat-btn.active { color: #A168FF; }

/* --- Download Button --- */
.download-button-dark {
    font-family: 'Readex Pro', sans-serif;
    background-color: #FFFFFF;
    color: #7C2318;
    border: none;
    padding: 21px 50px;
    border-radius: 36px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    min-width: 310px;
    box-sizing: border-box;
    transition: transform 0.2s;
}
.download-button-dark:hover { transform: scale(1.05); }

/* --- Responsive Design for Mobile --- */
@media (max-width: 768px) {
    .track-title-dark {
        font-size: 32px;
        line-height: 1.2;
    }
    .track-subtitle-dark {
        font-size: 24px;
    }
    .quote-text-dark {
        font-size: 16px;
        line-height: 1.6;
        margin: 40px 0;
    }
    .download-button-dark {
        min-width: 280px;
        padding: 18px 40px;
    }
}