/* ============================================
   PLAYER CONTROLS ALIGNMENT FIX
   Fixes button grid alignment issues
   ============================================ */

/* Main quick actions row - proper grid */
.player-quick-actions {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 0.375rem !important;
    padding: 0.75rem 0.5rem !important;
    margin-top: 0.75rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    align-items: stretch !important;
}

/* More options panel rows - proper grid */
.player-more-options .player-extra-controls {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 0.375rem !important;
    padding: 0.5rem !important;
    margin-top: 0 !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.08) !important;
    align-items: stretch !important;
}

.player-more-options .player-extra-controls:first-child {
    border-top: none !important;
    margin-top: 0.5rem !important;
}

/* Unified button styling */
.player-extra-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.3rem !important;
    padding: 0.5rem 0.25rem !important;
    min-width: unset !important;
    width: 100% !important;
    min-height: 58px !important;
    border-radius: 10px !important;
    font-size: 0.65rem !important;
    font-weight: 500 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: var(--bg-light, #1a1a1f) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease !important;
    color: #fff !important;
}

/* Buttons with custom backgrounds should keep them */
.player-extra-btn[style*="background"] {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ============================================
   ICON COLOR THEMES FOR EACH BUTTON
   ============================================ */

/* === ROW 1: Quick Actions === */

/* Notes - Green */
#notesBtn, .player-extra-btn[title="Notes"] {
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%) !important;
    border-color: #4CAF50 !important;
}

/* Quiz - Purple */
#quizBtn, .player-extra-btn[title="Quiz"] {
    background: linear-gradient(135deg, #9C27B0 0%, #6A1B9A 100%) !important;
    border-color: #9C27B0 !important;
}

/* Share - Blue */
.player-extra-btn[title="Share"] {
    background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%) !important;
    border-color: #2196F3 !important;
}

/* Offline/Download - Orange */
.player-extra-btn[title*="Offline"], .player-extra-btn[title*="Download"] {
    background: linear-gradient(135deg, #FF9800 0%, #E65100 100%) !important;
    border-color: #FF9800 !important;
}

/* Bookmarks - Amber/Yellow */
.player-extra-btn[title="Bookmarks"] {
    background: linear-gradient(135deg, #FFC107 0%, #FF8F00 100%) !important;
    border-color: #FFC107 !important;
    color: #1a1a1f !important;
}

/* Listen Later - Cyan */
#listenLaterBtn, .player-extra-btn[title="Listen Later"] {
    background: linear-gradient(135deg, #00BCD4 0%, #00838F 100%) !important;
    border-color: #00BCD4 !important;
}

/* More - Grey/Slate */
.player-more-btn, .player-extra-btn[title="More Options"] {
    background: linear-gradient(135deg, #607D8B 0%, #37474F 100%) !important;
    border-color: #607D8B !important;
}

/* Less - Grey */
.player-extra-btn[title="Less"] {
    background: linear-gradient(135deg, #78909C 0%, #455A64 100%) !important;
    border-color: #78909C !important;
}

/* === ROW 2: Content Tools === */

/* Transcript - Teal */
#transcriptBtn, .player-extra-btn[title="Transcript"] {
    background: linear-gradient(135deg, #009688 0%, #00695C 100%) !important;
    border-color: #009688 !important;
}

/* Chapters - Indigo */
#chaptersBtn, .player-extra-btn[title="Chapters"] {
    background: linear-gradient(135deg, #3F51B5 0%, #283593 100%) !important;
    border-color: #3F51B5 !important;
}

/* Clip - Pink */
#clipBtn, .player-extra-btn[title*="Clip"] {
    background: linear-gradient(135deg, #E91E63 0%, #AD1457 100%) !important;
    border-color: #E91E63 !important;
}

/* Follow/Like - Red */
#followBtn, .player-extra-btn[title="Follow"] {
    background: linear-gradient(135deg, #F44336 0%, #C62828 100%) !important;
    border-color: #F44336 !important;
}

/* EQ/Equalizer - Light Blue */
.player-extra-btn[title="Equalizer"], .player-extra-btn[title="EQ"] {
    background: linear-gradient(135deg, #03A9F4 0%, #0277BD 100%) !important;
    border-color: #03A9F4 !important;
}

/* Streak - Orange/Red gradient */
.player-extra-btn[title="Streak"] {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%) !important;
    border-color: #FF6B6B !important;
}

/* === ROW 3: Features === */

/* Insights - Cyan */
.player-extra-btn[title="Insights"] {
    background: linear-gradient(135deg, #00BCD4 0%, #0097A7 100%) !important;
    border-color: #00BCD4 !important;
}

/* Together - Deep Purple */
.player-extra-btn[title*="Together"] {
    background: linear-gradient(135deg, #673AB7 0%, #4527A0 100%) !important;
    border-color: #673AB7 !important;
}

/* Cast - Blue Grey */
.player-extra-btn[title="Cast"] {
    background: linear-gradient(135deg, #546E7A 0%, #37474F 100%) !important;
    border-color: #546E7A !important;
}

/* Car Mode - Dark Blue */
.player-extra-btn[title*="Car"] {
    background: linear-gradient(135deg, #1976D2 0%, #0D47A1 100%) !important;
    border-color: #1976D2 !important;
}

/* Report - Red/Orange */
.player-extra-btn[title="Report"] {
    background: linear-gradient(135deg, #FF5722 0%, #D84315 100%) !important;
    border-color: #FF5722 !important;
}

/* Settings - Grey */
.player-extra-btn[title="Settings"] {
    background: linear-gradient(135deg, #757575 0%, #424242 100%) !important;
    border-color: #757575 !important;
}

/* === TOP ACTION BUTTONS (Heart, Add, etc) === */
.player-actions-row .action-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Like/Heart button */
.player-actions-row .action-btn[title*="Like"],
.player-actions-row .action-btn.liked {
    background: linear-gradient(135deg, #F44336 0%, #C62828 100%) !important;
    border-color: #F44336 !important;
}

/* Add to Playlist */
.player-actions-row .action-btn[title*="Playlist"],
.player-actions-row .action-btn[title*="Add"] {
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%) !important;
    border-color: #4CAF50 !important;
}

/* External/Pop out */
.player-actions-row .action-btn[title*="Pop"],
.player-actions-row .action-btn[title*="External"] {
    background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%) !important;
    border-color: #2196F3 !important;
}

/* Sleep Timer */
.player-actions-row .action-btn[title*="Sleep"] {
    background: linear-gradient(135deg, #9C27B0 0%, #6A1B9A 100%) !important;
    border-color: #9C27B0 !important;
}

/* Speed */
.player-actions-row .action-btn[title*="Speed"],
.player-actions-row .speed-btn {
    background: linear-gradient(135deg, #FF9800 0%, #E65100 100%) !important;
    border-color: #FF9800 !important;
}

/* Share */
.player-actions-row .action-btn[title*="Share"] {
    background: linear-gradient(135deg, #00BCD4 0%, #00838F 100%) !important;
    border-color: #00BCD4 !important;
}

/* More/Menu */
.player-actions-row .action-btn[title*="More"],
.player-actions-row .action-btn[title*="Menu"] {
    background: linear-gradient(135deg, #673AB7 0%, #4527A0 100%) !important;
    border-color: #673AB7 !important;
}

.player-extra-btn i {
    font-size: 1.1rem !important;
    line-height: 1 !important;
}

.player-extra-btn span {
    line-height: 1.2 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.player-extra-btn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    filter: brightness(1.15) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.player-extra-btn:active {
    transform: scale(0.95) !important;
    filter: brightness(0.9) !important;
}

/* More button special styling */
.player-more-btn.active {
    background: linear-gradient(135deg, var(--gold, #d4af37) 0%, #c9a227 100%) !important;
    border-color: var(--gold, #d4af37) !important;
}

.player-more-btn.active i {
    transform: rotate(180deg);
}

/* === MOBILE RESPONSIVE === */
@media (max-width: 768px) {
    .player-quick-actions {
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 0.25rem !important;
        padding: 0.5rem 0.25rem !important;
    }
    
    .player-more-options .player-extra-controls {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 0.25rem !important;
        padding: 0.375rem 0.25rem !important;
    }
    
    .player-extra-btn {
        min-height: 52px !important;
        padding: 0.4rem 0.15rem !important;
        font-size: 0.55rem !important;
        border-radius: 8px !important;
    }
    
    .player-extra-btn i {
        font-size: 0.95rem !important;
    }
}

/* Very small screens */
@media (max-width: 400px) {
    .player-quick-actions {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .player-more-options .player-extra-controls {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .player-extra-btn {
        min-height: 48px !important;
        font-size: 0.5rem !important;
    }
    
    .player-extra-btn i {
        font-size: 0.9rem !important;
    }
}

/* === FIRST ROW BUTTONS (Heart, Add, External, Moon, 1x, Share, Menu) === */
.player-actions-row {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 0.25rem !important;
    align-items: center !important;
    justify-items: center !important;
    padding: 0 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.player-actions-row .action-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.15s ease !important;
}

.player-actions-row .action-btn:hover {
    background: rgba(212, 175, 55, 0.2) !important;
    border-color: var(--gold, #d4af37) !important;
    transform: scale(1.05) !important;
}

.player-actions-row .action-btn:active {
    transform: scale(0.95) !important;
}

@media (max-width: 768px) {
    .player-actions-row {
        gap: 0.15rem !important;
        padding: 0 0.25rem !important;
    }
    
    .player-actions-row .action-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
}

/* === PLAYER WRAPPER ALIGNMENT === */
.player-buttons-wrapper {
    width: 100%;
    padding: 0;
}

/* Ensure consistent border styling */
.player-more-options {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    margin: 0.5rem 0.25rem 0;
    padding-bottom: 0.5rem;
}

/* Loading indicator for audio */
.player-extra-btn.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.player-extra-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top-color: var(--gold, #d4af37);
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* === AUDIO LOADING STATES === */
.audio-loading-indicator {
    position: fixed;
    bottom: calc(var(--player-height, 80px) + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.audio-loading-indicator.visible {
    opacity: 1;
    visibility: visible;
}

.audio-loading-indicator i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}