/* ========================================
   MODERN AUDIO PLAYER V2 - Container Queries Approach
   ✅ Izolovano od V1 sa -v2 sufiksima
======================================== */

/* ========================================
   PRESETS - Color Schemes
======================================== */

/* ==================== DEFAULT (Purple) ==================== */
[data-preset="default"] {
    /* COLORS */
    --play-gradient-start: #667eea !important;
    --play-gradient-end: #764ba2 !important;
    --white-btn-icon: #667eea !important;
    --white-btn-hover-icon: #764ba2 !important;
    --track-active-border: #667eea !important;
    --track-active-bg: #e8f2ff !important;
    --track-hover-bg: #f5f5f5 !important;
    --progress-bg: #E8E8E8 !important;
    
    /* BORDER RADIUS */
    --wrapper-border-radius: 12px !important;
    --button-border-radius: 50% !important;
    --current-track-radius: 12px !important;
    --progress-radius: 8px !important;
    
    /* SPACING */
    --wrapper-padding: 20px !important;
    --controls-gap: 15px !important;
    --current-track-padding: 18px !important;
    --track-item-padding: 10px !important;
    
    /* SHADOWS */
    --player-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    --button-shadow: 0 2px 10px rgba(102, 126, 234, 0.15) !important;
}

[data-preset="default"] .modern-audio-player-wrapper-v2 {
    background: #ffffff !important;
    border-radius: var(--wrapper-border-radius) !important;
    padding: var(--wrapper-padding) !important;
    box-shadow: var(--player-shadow) !important;
}

[data-preset="default"] .current-track-display {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    border-radius: var(--current-track-radius) !important;
    padding: var(--current-track-padding) !important;
}

[data-preset="default"] .progress-bar {
    background: linear-gradient(90deg, #667eea, #764ba2) !important;
}

[data-preset="default"] .progress-container {
    border-radius: var(--progress-radius) !important;
}

[data-preset="default"] .controls-wrapper {
    gap: var(--controls-gap) !important;
}

[data-preset="default"] .control-button {
    border-radius: var(--button-border-radius) !important;
    box-shadow: var(--button-shadow) !important;
}

[data-preset="default"] .white-button {
    color: #667eea !important;
}

[data-preset="default"] .white-button:hover {
    color: #764ba2 !important;
}

[data-preset="default"] .track-item {
    color: #333333 !important;
    padding: var(--track-item-padding) !important;
}

[data-preset="default"] .track-item strong {
    color: #333333 !important;
}

[data-preset="default"] .track-item.active {
    background: #e8f2ff !important;
    border-left-color: #667eea !important;
    color: #111111 !important;
}

[data-preset="default"] .track-item.active strong {
    color: #111111 !important;
}

[data-preset="default"] .track-item:hover {
    background: #f5f5f5 !important;
    color: #111111 !important;
}

[data-preset="default"] .track-item:hover strong {
    color: #111111 !important;
}

/* ========================================
   MAIN WRAPPER - Container Query Setup
======================================== */

.modern-audio-player-wrapper-v2 {
    /* Container query setup */
    container-type: inline-size;
    container-name: audio-player-v2;
    
    /* Basic styling */
    text-align: center;
    background: white;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    
    /* Ensure overflow visible for shadows */
    overflow: visible;
}

.modern-audio-player-wrapper-v2 h3 {
    margin: 0 0 20px 0;
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

/* ========================================
   CURRENT TRACK DISPLAY
======================================== */

.modern-audio-player-wrapper-v2 .current-track-display {
    background: linear-gradient(135deg, var(--play-gradient-start, #667eea), var(--play-gradient-end, #764ba2));
    color: white;
    padding: var(--current-track-padding, 18px);
    border-radius: var(--current-track-radius, 12px);
    margin: 16px 0;
    font-size: 1.1rem;
    font-weight: 500;
}

/* ========================================
   CONTROLS - Container Query Responsive
======================================== */

.modern-audio-player-wrapper-v2 .controls-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(6px, 3cqw, var(--controls-gap, 15px)) !important;
    width: 100% !important;
    margin: 20px 0 !important;
    flex-wrap: nowrap !important;
    position: relative;
    overflow: visible;
}

/* ========================================
   BUTTONS - Responsive sizing via container queries
======================================== */

.modern-audio-player-wrapper-v2 .control-button {
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    will-change: transform;
    border-radius: 50%;
}

.modern-audio-player-wrapper-v2 .control-button:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3) !important;
}

.modern-audio-player-wrapper-v2 .control-button:active {
    transform: scale(0.90);
}

/* Play button - DUPLO veći, skalira se dinamički */
.modern-audio-player-wrapper-v2 .play-btn {
    width: clamp(40px, 18cqw, var(--max-play-size, 60px)) !important;
    height: clamp(40px, 18cqw, var(--max-play-size, 60px)) !important;
    flex-shrink: 0 !important;
    background: linear-gradient(135deg, var(--play-gradient-start, #667eea), var(--play-gradient-end, #764ba2)) !important;
    color: white !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.modern-audio-player-wrapper-v2 .play-btn:hover {
    filter: brightness(1.1);
    transform: scale(1.06);
}

.modern-audio-player-wrapper-v2 .play-btn:focus {
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5), 0 0 0 3px rgba(255, 255, 255, 0.4) !important;
}

/* Small buttons - POLOVINA play button-a, skaliraju se dinamički */
.modern-audio-player-wrapper-v2 .white-button {
    width: clamp(25px, 9cqw, var(--max-small-size, 30px)) !important;
    height: clamp(25px, 9cqw, var(--max-small-size, 30px)) !important;
    flex-shrink: 0 !important;
    background: var(--white-btn-bg, #ffffff) !important;
    color: var(--white-btn-icon, #667eea);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.modern-audio-player-wrapper-v2 .white-button:hover {
    color: var(--white-btn-hover-icon, #764ba2);
    transform: scale(1.08);
}

.modern-audio-player-wrapper-v2 .white-button:focus {
    box-shadow: 0 4px 12px rgba(0,0,0,0.25), 0 0 0 3px rgba(102, 126, 234, 0.3) !important;
}

/* Wrapper containers - use display:contents to remove from layout */
.modern-audio-player-wrapper-v2 .volume-control,
.modern-audio-player-wrapper-v2 .prev-control,
.modern-audio-player-wrapper-v2 .play-control,
.modern-audio-player-wrapper-v2 .next-control,
.modern-audio-player-wrapper-v2 .download-control {
    display: contents !important;
}

/* Volume control needs position:relative for popup */
.modern-audio-player-wrapper-v2 .volume-control {
    position: relative !important;
    display: inline-block !important; /* Override display:contents */
}

/* ========================================
   ICONS - Responsive sizing
======================================== */

/* Small button icons */
.modern-audio-player-wrapper-v2 .white-button svg {
    width: clamp(14px, 4.5cqw, var(--max-icon-size, 20px)) !important;
    height: clamp(14px, 4.5cqw, var(--max-icon-size, 20px)) !important;
}

/* Play triangle icon */
.modern-audio-player-wrapper-v2 .play-triangle {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 0;
    height: 0;
    border-left: clamp(12px, 4cqw, calc(var(--max-play-icon-size, 18px) * 0.9)) solid white !important;
    border-top: clamp(8px, 2.5cqw, calc(var(--max-play-icon-size, 18px) * 0.6)) solid transparent !important;
    border-bottom: clamp(8px, 2.5cqw, calc(var(--max-play-icon-size, 18px) * 0.6)) solid transparent !important;
    margin-left: 4px;
}

/* Pause bars */
.modern-audio-player-wrapper-v2 .pause-bars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.modern-audio-player-wrapper-v2 .pause-bar {
    width: clamp(3px, 1.2cqw, calc(var(--max-play-icon-size, 18px) * 0.22)) !important;
    height: clamp(12px, 4cqw, calc(var(--max-play-icon-size, 18px) * 0.89)) !important;
    background-color: white;
    border-radius: 1px;
}

/* ========================================
   VOLUME CONTROL
======================================== */

.modern-audio-player-wrapper-v2 .volume-popup {
    position: absolute;
    bottom: clamp(55px, 20cqw, 70px);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 12px 8px;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    display: none;
    z-index: 1000;
}

.modern-audio-player-wrapper-v2 .volume-control:hover .volume-popup,
.modern-audio-player-wrapper-v2 .volume-control:focus-within .volume-popup {
    display: block;
}

.modern-audio-player-wrapper-v2 .volume-slider {
    writing-mode: bt-lr;
    -webkit-appearance: slider-vertical;
    width: 8px;
    height: 120px;
    background: linear-gradient(to top, 
        var(--play-gradient-start, #667eea) 0%, 
        var(--play-gradient-end, #764ba2) 100%);
    border-radius: 10px;
    outline: none;
    cursor: pointer;
}

.modern-audio-player-wrapper-v2 .volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.modern-audio-player-wrapper-v2 .volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* ========================================
   PROGRESS BAR
======================================== */

.modern-audio-player-wrapper-v2 .progress-section {
    margin: 20px 0;
}

.modern-audio-player-wrapper-v2 .progress-container {
    width: 100%;
    height: 6px;
    background: var(--progress-bg, #e8e8e8);
    border-radius: var(--progress-radius, 8px);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.modern-audio-player-wrapper-v2 .progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--play-gradient-start, #667eea), var(--play-gradient-end, #764ba2));
    border-radius: var(--progress-radius, 8px);
    transition: width 0.1s linear;
}

.modern-audio-player-wrapper-v2 .time-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 12px;
    color: #666;
}

/* ========================================
   TRACK LIST
======================================== */

.modern-audio-player-wrapper-v2 .track-list {
    text-align: left;
    margin: 20px 0;
}

.modern-audio-player-wrapper-v2 .track-item {
    cursor: pointer;
    padding: var(--track-item-padding, 10px);
    border-bottom: 1px solid var(--track-separator-color, #eeeeee);
    border-left: 4px solid transparent;
    transition: all 0.2s;
    color: var(--track-text-color, #333);
}

.modern-audio-player-wrapper-v2 .track-item:hover {
    background: var(--track-hover-bg, #f5f5f5);
}

.modern-audio-player-wrapper-v2 .track-item.active {
    background: var(--track-active-bg, #e8f2ff);
    border-left-color: var(--track-active-border, #667eea);
}

.modern-audio-player-wrapper-v2 .track-item strong {
    color: inherit;
}

/* ========================================
   UTILITY CLASSES
======================================== */

.modern-audio-player-wrapper-v2 .audio-element {
    display: none;
}

.modern-audio-player-wrapper-v2 .no-tracks-message {
    margin-top: 20px;
    color: #666;
    font-style: italic;
}

/* ========================================
   ELEMENTOR EDITOR OVERRIDES
======================================== */

.elementor-widget-modern-audio-player-v2 .modern-audio-player-wrapper-v2 .control-button {
    padding: 0 !important;
    box-sizing: content-box !important;
}

/* Override any inline styles from Elementor */
.elementor-widget-modern-audio-player-v2 .modern-audio-player-wrapper-v2 .play-btn[style],
.elementor-widget-modern-audio-player-v2 .modern-audio-player-wrapper-v2 .white-button[style] {
    /* Container queries handle sizing, ignore inline styles */
}

/* ========================================
   PRESET DROPDOWN STYLING
======================================== */

.elementor-control-preset_style select option[value^="custom_"] {
    background-color: #f5f5f5 !important;
    font-style: italic;
}

.elementor-control-preset_style select option:not([value^="custom_"]) {
    background-color: #ffffff !important;
}

/* ========================================
   FALLBACK - Browsers without container query support
======================================== */

@supports not (width: 1cqw) {
    .modern-audio-player-wrapper-v2 .play-btn {
        width: var(--max-play-size, 60px) !important;
        height: var(--max-play-size, 60px) !important;
    }
    
    .modern-audio-player-wrapper-v2 .white-button {
        width: var(--max-small-size, 30px) !important;
        height: var(--max-small-size, 30px) !important;
    }
    
    /* Responsive fallback */
    @media (max-width: 350px) {
        .modern-audio-player-wrapper-v2 .play-btn {
            width: 50px !important;
            height: 50px !important;
        }
        
        .modern-audio-player-wrapper-v2 .white-button {
            width: 25px !important;
            height: 25px !important;
        }
        
        .modern-audio-player-wrapper-v2 .controls-wrapper {
            gap: 8px !important;
        }
    }
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
======================================== */

@media (max-width: 480px) {
    .modern-audio-player-wrapper-v2 {
        padding: 16px;
    }
    
    .modern-audio-player-wrapper-v2 h3 {
        font-size: 20px;
    }
    
    .modern-audio-player-wrapper-v2 .current-track-display {
        font-size: 1rem;
        padding: 14px;
    }
}