/* WoodMart Theme SVG Fix - Force Width */
/* .modern-audio-player-wrapper svg {
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.5 !important;
    flex-shrink: 1 !important;
    max-width: 100% !important;
    max-height: 100% !important;
}*/
/* ========================================
   PRESETS - Color Schemes
======================================== */

/* ==================== DEFAULT (Purple - Complete) ==================== */
[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;
    
    /* === BUTTON SIZES === */
    --play-btn-size: 55px !important;
    --small-btn-size: 32px !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 {
    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"] .play-btn {
    width: var(--play-btn-size) !important;
    height: var(--play-btn-size) !important;
}

[data-preset="default"] .white-button {
    width: var(--small-btn-size) !important;
    height: var(--small-btn-size) !important;
    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;
}
/*-----------------*/
.elementor-widget-modern-audio-player .modern-audio-player-wrapper .control-button {
    padding: 0 !important;
    box-sizing: content-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.modern-audio-player-wrapper .control-button svg {
    margin: 0 auto !important;
}

.modern-audio-player-wrapper .play-triangle {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Modern Audio Player Styles */
.modern-audio-player-wrapper {
    text-align: center;
    background: white;
    max-width: 400px;
    margin: 0 auto;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

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

.modern-audio-player-wrapper .current-track-display {
    color: white;
}

.modern-audio-player-wrapper .play-triangle {
    width: 0;
    height: 0;
    border-left: 18px solid white;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    margin-left: 6px;
}

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

.modern-audio-player-wrapper .pause-bar {
    width: 4px;
    height: 16px;
    background-color: white;
    border-radius: 1px;
}

.modern-audio-player-wrapper .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;
}

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

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

.modern-audio-player-wrapper .white-button {
    background: var(--white-btn-bg, #ffffff) !important;
    color: var(--white-btn-icon, #667eea);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform-origin: center center;
}

.modern-audio-player-wrapper .white-button:hover {
    background: var(--white-btn-bg, #ffffff) !important;
    color: var(--white-btn-hover-icon, #667eea);
    transform: scale(1.08);
}
/* Small Buttons Size - sa CSS Variables */
.modern-audio-player-wrapper .volume-btn,
.modern-audio-player-wrapper .prev-btn,
.modern-audio-player-wrapper .next-btn,
.modern-audio-player-wrapper .download-btn {
    width: var(--small-btn-size, 25px) !important;
    height: var(--small-btn-size, 25px) !important;
    min-width: var(--small-btn-size, 25px) !important;
    min-height: var(--small-btn-size, 25px) !important;
}

.modern-audio-player-wrapper .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;
}

/* Play Button - sa CSS Variables */
.modern-audio-player-wrapper .gradient-button,
.modern-audio-player-wrapper .play-btn,
.modern-audio-player-wrapper button.play-btn {
    /* Size iz CSS varijable */
    width: var(--play-btn-size, 45px) !important;
    height: var(--play-btn-size, 45px) !important;
    min-width: var(--play-btn-size, 45px) !important;
    min-height: var(--play-btn-size, 45px) !important;
    
    /* Gradient iz CSS varijable */
    background: linear-gradient(135deg, var(--play-gradient-start, #667eea), var(--play-gradient-end, #764ba2)) !important;
    
    /* Ostali stilovi */
    color: white !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    transform-origin: center center;
}

.modern-audio-player-wrapper .gradient-button:hover,
.modern-audio-player-wrapper .play-btn:hover,
.modern-audio-player-wrapper button.play-btn:hover {
    background: linear-gradient(135deg, var(--play-gradient-start, #667eea), var(--play-gradient-end, #764ba2)) !important;
    filter: brightness(1.1);
    transform: scale(1.06);
    color: white !important;
}
.modern-audio-player-wrapper .volume-btn svg,
.modern-audio-player-wrapper .download-btn svg {
    width: 100% !important;
    height: 100% !important;
    max-width: var(--icon-size, 20px) !important;
    max-height: var(--icon-size, 20px) !important;
}
.modern-audio-player-wrapper .gradient-button:focus,
.modern-audio-player-wrapper .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;
}

/* ✅ CONTROLS WRAPPER - FIXED GAP */
.modern-audio-player-wrapper .controls-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    position: relative;
    flex-wrap: nowrap !important;
    gap: var(--controls-gap, 12px);
}

.modern-audio-player-wrapper .volume-control {
    position: relative;
    display: flex;
    align-items: center;
}

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

/* ✅ FIXED VOLUME SLIDER - Progressive Fill */
.modern-audio-player-wrapper .volume-slider {
    writing-mode: bt-lr;
    -webkit-appearance: slider-vertical;
    width: 8px;
    height: 100px;
    background: #e0e0e0;
    border-radius: 10px;
    outline: none;
    cursor: pointer;
}

.modern-audio-player-wrapper .volume-slider::-webkit-slider-runnable-track {
    background: transparent;
}

.modern-audio-player-wrapper .volume-slider::-moz-range-track {
    background: transparent;
}

.modern-audio-player-wrapper .volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--play-gradient-start);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.modern-audio-player-wrapper .volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--play-gradient-start);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

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

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

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

.modern-audio-player-wrapper .progress-bar::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.modern-audio-player-wrapper .time-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    font-size: 11px;
    color: #999;
}

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

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

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

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

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

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

.modern-audio-player-wrapper .editor-preview-note {
    margin-top: 15px;
    padding: 10px;
    background: #f0f0f0;
    border-radius: 5px;
    font-size: 12px;
    color: #666;
}

/* Tablet - Elementor breakpoint 768px-1024px */
@media (max-width: 1024px) and (min-width: 768px) {
    .modern-audio-player-wrapper .current-track-display {
        padding: 12px;
        margin: 12px 0;
    }
    
    .modern-audio-player-wrapper .controls-wrapper {
        gap: 10px;
        margin: 10px 0;
    }
    
    .modern-audio-player-wrapper .progress-section {
        margin: 15px 0;
    }
    
    .modern-audio-player-wrapper .track-list {
        margin: 15px 0;
    }
}

/* Phone Responsive */
@media (max-width: 480px) {
    .modern-audio-player-wrapper .controls-wrapper {
        gap: 8px;
    }
}

/* Custom preset highlighting - svetlo siva pozadina */
.elementor-control-preset_style select option[value^="custom_"] {
    background-color: #f5f5f5 !important;
    font-style: italic;
}

/* Factory preseti - bela pozadina (default) */
.elementor-control-preset_style select option:not([value^="custom_"]) {
    background-color: #ffffff !important;
}