/* Modern Waveform Audio Player CSS */
/* Modern Waveform Audio Player CSS */

.modern-audio-player {
    background: #ffffff;
    border-radius: 12px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
    width: 100%;
    min-height: 50px;
    box-sizing: border-box;
    direction: ltr;
    /* Ensure player UI stays consistent regardless of page direction */
}

.dark .modern-audio-player {
    background: #1f2937;
    border-color: #374151;
}

.map-play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #b91c1c;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    border: none;
    outline: none;
    padding-left: 2px;
    /* Center the play icon better */
}

.map-play-btn:hover {
    background: #991b1b;
    transform: scale(1.08);
}

.map-progress-container {
    flex-grow: 1;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    position: relative;
    min-width: 60px;
}

.map-bar {
    flex: 1;
    height: var(--height, 4px);
    /* Unplayed bars: faint red to match play button theme */
    background: #fecaca;
    border-radius: 4px;
    transition: background 0.1s ease;
    min-width: 2px;
}

.dark .map-bar {
    background: #4b5563;
}

.map-bar.played {
    background: #b91c1c !important;
}

.map-time {
    font-size: 11px;
    font-weight: 700;
    color: #4b5563;
    min-width: 40px;
    text-align: right;
    font-family: 'Cairo', sans-serif;
}

.dark .map-time {
    color: #9ca3af;
}

/* Invert mode (for dark backgrounds like featured cards) */
.invert .modern-audio-player {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    box-shadow: none;
}

.invert .map-play-btn {
    background: #ef4444;
}

.invert .map-bar {
    /* Unplayed bars in dark mode: translucent red */
    background: rgba(239, 68, 68, 0.2);
}

.invert .map-bar.played {
    background: #ef4444 !important;
}

.invert .map-time {
    color: #ffffff;
}

.map-play-btn i.fa-pause {
    padding-left: 0;
    /* Reset centering for pause icon */
}