/**
 * KPromoSender - Responsive Player CSS
 * Sistema responsive completo per il player avanzato
 * Version: 2.0.2
 */

/* ================================
   RESPONSIVE VARIABLES
   ================================ */

:root {
    /* Breakpoints */
    --kpromo-breakpoint-xs: 480px;
    --kpromo-breakpoint-sm: 640px;
    --kpromo-breakpoint-md: 768px;
    --kpromo-breakpoint-lg: 1024px;
    --kpromo-breakpoint-xl: 1280px;
    
    /* Touch targets */
    --kpromo-touch-target: 44px;
    --kpromo-touch-target-large: 56px;
    
    /* Spacing scale */
    --kpromo-spacing-xs: 4px;
    --kpromo-spacing-sm: 8px;
    --kpromo-spacing-md: 16px;
    --kpromo-spacing-lg: 24px;
    --kpromo-spacing-xl: 32px;
}

/* ================================
   BASE RESPONSIVE LAYOUT
   ================================ */

.kpromo-player {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.kpromo-player * {
    box-sizing: border-box;
}

/* ================================
   MOBILE FIRST - XS (0-479px)
   ================================ */

@media (max-width: 479px) {
    .kpromo-player {
        padding: var(--kpromo-spacing-sm);
        margin: var(--kpromo-spacing-sm) 0;
    }
    
    .kpromo-controls {
        padding: var(--kpromo-spacing-md) !important;
        gap: var(--kpromo-spacing-sm);
    }
    
    .kpromo-track-info {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--kpromo-spacing-xs);
    }
    
    .track-title {
        font-size: 14px;
        line-height: 1.3;
        font-weight: 600;
    }
    
    .track-artist {
        font-size: 12px;
        line-height: 1.2;
    }
    
    .track-time,
    .track-duration {
        font-size: 11px;
    }
    
    /* Play button optimized for touch */
    .play-btn {
        min-width: var(--kpromo-touch-target);
        min-height: var(--kpromo-touch-target);
        font-size: 12px;
        padding: var(--kpromo-spacing-sm) var(--kpromo-spacing-md);
    }
    
    .play-btn svg {
        width: 16px;
        height: 16px;
    }
    
    /* ===============================================
       PROGRESS BAR MOBILE IMPROVEMENTS - PRIORITÀ MASSIMA
       =============================================== */
    
    /* Grid Progress Bar - Mobile First Design */
    .grid-progress-bar {
        grid-area: progress !important;
        width: 100% !important;
        padding: var(--kpromo-spacing-lg) 0 !important;
        margin: var(--kpromo-spacing-md) 0 !important;
        order: -1 !important; /* Prima dei controlli nel layout */
        grid-column: 1 / -1 !important; /* Estende su tutta la larghezza */
        position: relative !important;
        z-index: 10 !important; /* Sopra altri elementi */
        background: transparent !important;
    }
    
    /* Track container con migliore area touch */
    .grid-progress-bar .progress-track,
    .progress-track {
        height: 14px !important; /* Più alta per migliore visibilità */
        width: 100% !important;
        background: var(--progress-bar-bg-color, rgba(255, 255, 255, 0.25)) !important;
        border-radius: 7px !important;
        position: relative !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin: 0 !important;
        
        /* Migliore contrasto visivo */
        border: 2px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 
            0 3px 12px rgba(0, 0, 0, 0.2),
            inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        
        /* Area touch più ampia */
        transform: scale(1) !important;
        transition: all 0.2s ease !important;
    }
    
    /* Hover state con area touch migliorata */
    .grid-progress-bar .progress-track:hover,
    .progress-track:hover {
        border-color: rgba(255, 255, 255, 0.3) !important;
        box-shadow: 
            0 4px 16px rgba(0, 0, 0, 0.3),
            inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        transform: scaleY(1.1) !important;
    }
    
                /* Progress fill con gradiente per migliore visibilità */
            .grid-progress-bar .progress-fill,
            .progress-fill {
                height: 100% !important;
                border-radius: 7px !important;
                background: var(--progress-bar-color, var(--kpromo-primary)) !important;
                width: 0%; /* RIMOSSO !important per permettere aggiornamento JavaScript */
                transition: width 0.1s linear !important;
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                
                /* Gradiente migliorato per maggiore visibilità */
                background: linear-gradient(90deg, 
                    var(--progress-bar-color, var(--kpromo-primary)), 
                    color-mix(in srgb, var(--progress-bar-color, var(--kpromo-primary)) 70%, white),
                    var(--progress-bar-color, var(--kpromo-primary))
                ) !important;
                
                /* Effetto glow per migliore visibilità */
                box-shadow: 0 0 8px rgba(255, 107, 53, 0.4) !important;
            }
    
                /* Thumb sempre visibile su mobile con dimensioni ottimizzate */
            .grid-progress-bar .progress-thumb,
            .progress-thumb {
                width: 28px !important;
                height: 28px !important;
                background: #ffffff !important;
                border: 4px solid var(--progress-bar-color, var(--kpromo-primary)) !important;
                border-radius: 50% !important;
                position: absolute !important;
                top: 50% !important;
                left: 0%; /* RIMOSSO !important per permettere aggiornamento JavaScript */
                transform: translate(-50%, -50%) !important;
                cursor: pointer !important;
                z-index: 5 !important;
                
                /* Sempre visibile su mobile */
                opacity: 1 !important;
                
                /* Shadow per migliore contrasto */
                box-shadow: 
                    0 4px 16px rgba(0, 0, 0, 0.4),
                    0 0 0 2px rgba(255, 255, 255, 0.1) !important;
                
                /* Transizioni smooth */
                transition: all 0.2s ease !important;
            }
    
    /* Touch feedback per thumb */
    .grid-progress-bar .progress-thumb:active,
    .progress-thumb:active {
        transform: translate(-50%, -50%) scale(1.3) !important;
        box-shadow: 
            0 6px 20px rgba(0, 0, 0, 0.5),
            0 0 0 4px rgba(255, 255, 255, 0.2) !important;
    }
    
    /* Time display migliorato */
    .grid-progress-bar .progress-time-display,
    .progress-time-display {
        margin-top: var(--kpromo-spacing-md) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        display: flex !important;
        justify-content: space-between !important;
        color: rgba(255, 255, 255, 0.95) !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
        padding: 0 var(--kpromo-spacing-xs) !important;
    }
    
    /* ===============================================
       MINIMAL PLAYER PROGRESS BAR MOBILE
       =============================================== */
    
    .minimal-progress-bar {
        width: 100% !important;
        margin: var(--kpromo-spacing-md) 0 !important;
        padding: var(--kpromo-spacing-sm) 0 !important;
        order: 2 !important; /* Dopo info ma prima dei controlli */
    }
    
    .minimal-progress-bar .progress-track {
        height: 12px !important;
        background: var(--progress-bar-bg-color, rgba(255, 255, 255, 0.25)) !important;
        border-radius: 6px !important;
        border: 2px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }
    
    .minimal-progress-bar .progress-fill {
        height: 100% !important;
        border-radius: 6px !important;
        background: linear-gradient(90deg, 
            var(--progress-bar-color, var(--kpromo-primary)), 
            color-mix(in srgb, var(--progress-bar-color, var(--kpromo-primary)) 80%, white)
        ) !important;
        box-shadow: 0 0 6px rgba(255, 107, 53, 0.3) !important;
    }

    /* ===============================================
       LEGACY PROGRESS BAR COMPATIBILITY
       =============================================== */
    
    /* Progress bar per compatibilità con versioni precedenti */
    .progress-bar {
        height: 14px !important;
        border-radius: 7px !important;
        margin: var(--kpromo-spacing-md) 0 !important;
        background: var(--progress-bar-bg-color, rgba(255, 255, 255, 0.25)) !important;
        border: 2px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2) !important;
        position: relative !important;
        width: 100% !important;
    }
    
    /* Progress handle per legacy */
    .progress-handle {
        width: 28px !important;
        height: 28px !important;
        border: 4px solid var(--progress-bar-color, var(--kpromo-primary)) !important;
        background: #ffffff !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
        opacity: 1 !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        cursor: pointer !important;
    }
    
    /* ===============================================
       WAVEFORM MOBILE ADJUSTMENTS
       =============================================== */
    
    .kpromo-waveform {
        height: 60px !important; /* Più alta su mobile per migliore visibilità */
        margin: var(--kpromo-spacing-md) 0 !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Waveform time display */
    .waveform-time-display {
        font-size: 13px !important;
        font-weight: 700 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    }
    
    /* Download buttons stack */
    .kpromo-downloads {
        flex-direction: column;
        gap: var(--kpromo-spacing-sm);
    }
    
    .download-btn {
        width: 100%;
        justify-content: center;
        min-height: var(--kpromo-touch-target);
    }
    
    /* Grid layout mobile */
    .kpromo-player-grid .grid-artwork {
        width: 80px;
        height: 80px;
    }
    
    .kpromo-player-grid .grid-content {
        flex: 1;
        min-width: 0;
    }
    
    /* Grid layout migliorato per mobile */
    .kpromo-player-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas: 
            "artwork"
            "info"
            "waveform"
            "progress"
            "controls"
            "cta" !important;
        gap: var(--kpromo-spacing-md) !important;
        padding: var(--kpromo-spacing-md) !important;
    }
    
    .kpromo-player-grid .grid-artwork-container {
        grid-area: artwork;
        justify-self: center;
    }
    
    .kpromo-player-grid .grid-info {
        grid-area: info;
        text-align: center;
    }
    
    .kpromo-player-grid .grid-waveform {
        grid-area: waveform;
    }
    
    .kpromo-player-grid .grid-progress-bar {
        grid-area: progress;
    }
    
    .kpromo-player-grid .grid-controls {
        grid-area: controls;
        justify-content: center;
        gap: var(--kpromo-spacing-lg);
    }
    
    .kpromo-player-grid .grid-cta {
        grid-area: cta;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    /* List layout mobile */
    .kpromo-player-list {
        padding: var(--kpromo-spacing-md);
    }
    
    .kpromo-player-list .list-artwork {
        width: 60px;
        height: 60px;
    }
    
    /* Floating layout mobile */
    .kpromo-player-floating {
        margin: var(--kpromo-spacing-md);
        max-width: calc(100vw - 32px);
    }
}

/* ================================
   SMALL MOBILE - SM (480-639px)
   ================================ */

@media (min-width: 480px) and (max-width: 639px) {
    .kpromo-player {
        padding: var(--kpromo-spacing-md);
        margin: var(--kpromo-spacing-md) 0;
    }
    
    .kpromo-controls {
        padding: var(--kpromo-spacing-lg) !important;
        gap: var(--kpromo-spacing-md);
    }
    
    .track-title {
        font-size: 16px;
    }
    
    .track-artist {
        font-size: 13px;
    }
    
    .play-btn {
        min-width: var(--kpromo-touch-target-large);
        min-height: var(--kpromo-touch-target-large);
        font-size: 14px;
    }
    
    .play-btn svg {
        width: 18px;
        height: 18px;
    }
    
    /* ===============================================
       PROGRESS BAR SMALL MOBILE OPTIMIZATIONS
       =============================================== */
    
    /* Grid Progress Bar per small mobile */
    .grid-progress-bar {
        padding: var(--kpromo-spacing-lg) 0 !important;
        margin: var(--kpromo-spacing-lg) 0 !important;
    }
    
    .grid-progress-bar .progress-track,
    .progress-track {
        height: 12px !important;
        border-radius: 6px !important;
        border: 2px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
    }
    
    .grid-progress-bar .progress-fill,
    .progress-fill {
        border-radius: 6px !important;
        box-shadow: 0 0 6px rgba(255, 107, 53, 0.4) !important;
    }
    
    .grid-progress-bar .progress-thumb,
    .progress-thumb {
        width: 26px !important;
        height: 26px !important;
        border: 3px solid var(--progress-bar-color, var(--kpromo-primary)) !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
    }
    
    .progress-time-display {
        font-size: 13px !important;
        margin-top: var(--kpromo-spacing-md) !important;
    }
    
    /* Minimal progress bar per small mobile */
    .minimal-progress-bar .progress-track {
        height: 10px !important;
        border-radius: 5px !important;
    }
    
    .minimal-progress-bar .progress-fill {
        border-radius: 5px !important;
    }
    
    .kpromo-waveform {
        height: 55px;
    }
    
    .kpromo-player-grid .grid-artwork {
        width: 100px;
        height: 100px;
    }
    
    .kpromo-player-list .list-artwork {
        width: 70px;
        height: 70px;
    }
}

/* ================================
   TABLET - MD (640-767px)
   ================================ */

@media (min-width: 640px) and (max-width: 767px) {
    .kpromo-player {
        margin: var(--kpromo-spacing-lg) 0;
    }
    
    .kpromo-controls {
        padding: var(--kpromo-spacing-xl) !important;
    }
    
    .kpromo-track-info {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    
    .track-title {
        font-size: 18px;
    }
    
    .track-artist {
        font-size: 14px;
    }
    
    .play-btn svg {
        width: 20px;
        height: 20px;
    }
    
    .kpromo-waveform {
        height: 60px;
    }
    
    .kpromo-downloads {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--kpromo-spacing-md);
    }
    
    .download-btn {
        flex: 1;
        min-width: 120px;
    }
    
    .kpromo-player-grid .grid-artwork {
        width: 120px;
        height: 120px;
    }
    
    .kpromo-player-list .list-artwork {
        width: 80px;
        height: 80px;
    }
}

/* ================================
   LARGE TABLET - LG (768-1023px)
   ================================ */

@media (min-width: 768px) and (max-width: 1023px) {
    .kpromo-player {
        margin: var(--kpromo-spacing-xl) 0;
    }
    
    .track-title {
        font-size: 20px;
    }
    
    .track-artist {
        font-size: 15px;
    }
    
    .kpromo-waveform {
        height: 70px;
    }
    
    .kpromo-player-grid .grid-artwork {
        width: 140px;
        height: 140px;
    }
    
    .kpromo-player-list .list-artwork {
        width: 90px;
        height: 90px;
    }
    
    /* Two-column layout for some elements */
    .kpromo-player-full .full-content {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: var(--kpromo-spacing-xl);
    }
}

/* ================================
   DESKTOP - XL (1024px+)
   ================================ */

@media (min-width: 1024px) {
    .kpromo-player {
        margin: var(--kpromo-spacing-xl) 0;
    }
    
    .track-title {
        font-size: 22px;
    }
    
    .track-artist {
        font-size: 16px;
    }
    
    .kpromo-waveform {
        height: 80px;
    }
    
    .kpromo-player-grid .grid-artwork {
        width: 160px;
        height: 160px;
    }
    
    .kpromo-player-list .list-artwork {
        width: 100px;
        height: 100px;
    }
    
    .kpromo-player-full .full-content {
        display: grid;
        grid-template-columns: 1fr 400px;
        gap: calc(var(--kpromo-spacing-xl) * 2);
    }
    
    /* Hover states for desktop */
    .play-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .download-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

/* ================================
   TOUCH DEVICE OPTIMIZATIONS
   ================================ */

@media (hover: none) and (pointer: coarse) {
    /* Touch-specific styles */
    .play-btn {
        min-width: var(--kpromo-touch-target-large);
        min-height: var(--kpromo-touch-target-large);
    }
    
    .download-btn {
        min-height: var(--kpromo-touch-target);
        padding: var(--kpromo-spacing-md) var(--kpromo-spacing-lg);
    }
    
    /* ===============================================
       PROGRESS BAR TOUCH OPTIMIZATIONS - CRITICAL
       =============================================== */
    
    /* Tutte le progress bar su dispositivi touch */
    .progress-bar,
    .progress-track,
    .grid-progress-bar .progress-track,
    .minimal-progress-bar .progress-track {
        height: 16px !important; /* Ancora più alta per touch */
        padding: 6px 0 !important; /* Area touch estesa */
        cursor: pointer !important;
        
        /* Touch feedback migliorato */
        -webkit-tap-highlight-color: transparent !important;
        tap-highlight-color: transparent !important;
        
        /* Bordi più evidenti per touch */
        border: 2px solid rgba(255, 255, 255, 0.2) !important;
        box-shadow: 
            0 4px 16px rgba(0, 0, 0, 0.25),
            inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Progress handle/thumb sempre visibile e più grande su touch */
    .progress-handle,
    .progress-thumb,
    .grid-progress-bar .progress-thumb,
    .minimal-progress-bar .progress-thumb {
        width: 32px !important;
        height: 32px !important;
        opacity: 1 !important; /* Sempre visibile */
        border: 4px solid var(--progress-bar-color, var(--kpromo-primary)) !important;
        background: #ffffff !important;
        border-radius: 50% !important;
        
        /* Touch shadows per migliore visibilità */
        box-shadow: 
            0 4px 20px rgba(0, 0, 0, 0.4),
            0 0 0 2px rgba(255, 255, 255, 0.1),
            inset 0 1px 3px rgba(255, 255, 255, 0.2) !important;
        
        /* Transizioni ottimizzate per touch */
        transition: all 0.15s ease !important;
        cursor: pointer !important;
        
        /* Accessibilità touch */
        -webkit-tap-highlight-color: transparent !important;
        tap-highlight-color: transparent !important;
    }
    
    /* Touch feedback attivo */
    .progress-handle:active,
    .progress-thumb:active,
    .grid-progress-bar .progress-thumb:active {
        transform: translate(-50%, -50%) scale(1.4) !important;
        box-shadow: 
            0 6px 24px rgba(0, 0, 0, 0.5),
            0 0 0 4px rgba(255, 255, 255, 0.2),
            inset 0 1px 3px rgba(255, 255, 255, 0.3) !important;
    }
    
    /* Progress fill con animazione touch */
    .progress-fill,
    .grid-progress-bar .progress-fill,
    .minimal-progress-bar .progress-fill {
        /* Gradiente ottimizzato per touch devices */
        background: linear-gradient(90deg, 
            var(--progress-bar-color, var(--kpromo-primary)), 
            color-mix(in srgb, var(--progress-bar-color, var(--kpromo-primary)) 60%, white),
            var(--progress-bar-color, var(--kpromo-primary))
        ) !important;
        
        /* Glow effect per migliore feedback visivo */
        box-shadow: 
            0 0 10px rgba(255, 107, 53, 0.5),
            inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
    }
    
    /* Container progress bar touch responsive */
    .grid-progress-bar,
    .minimal-progress-bar {
        padding: var(--kpromo-spacing-lg) 0 !important;
        margin: var(--kpromo-spacing-lg) 0 !important;
        
        /* Area touch estesa */
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Time display ottimizzato per touch */
    .progress-time-display,
    .grid-progress-bar .progress-time-display,
    .waveform-time-display {
        font-size: 14px !important;
        font-weight: 700 !important;
        margin-top: var(--kpromo-spacing-md) !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
        color: rgba(255, 255, 255, 0.95) !important;
    }
    
    /* Waveform touch ottimizzazioni */
    .kpromo-waveform {
        height: 70px !important; /* Più alta per migliore touch interaction */
        border: 2px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 10px !important;
        cursor: pointer !important;
    }
    
    /* Remove hover effects on touch devices */
    .play-btn:hover {
        transform: none;
        box-shadow: initial;
    }
    
    .download-btn:hover {
        transform: none;
        box-shadow: initial;
    }
    
    /* Touch-specific progress bar hover removal */
    .progress-track:hover {
        transform: none !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2) !important;
    }
}

/* ================================
   ORIENTATION HANDLING
   ================================ */

@media (orientation: landscape) and (max-height: 500px) {
    /* Landscape mobile optimizations */
    .kpromo-player {
        padding: var(--kpromo-spacing-sm);
        margin: var(--kpromo-spacing-sm) 0;
    }
    
    .kpromo-controls {
        padding: var(--kpromo-spacing-md) !important;
    }
    
    .kpromo-player-full .full-artwork {
        max-width: 40%;
    }
    
    .kpromo-waveform {
        height: 40px;
    }
}

/* ================================
   STICKY PLAYER RESPONSIVE
   ================================ */

.kpromo-sticky-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: var(--kpromo-spacing-md);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

@media (max-width: 767px) {
    .kpromo-sticky-player {
        padding: var(--kpromo-spacing-sm);
    }
    
    .kpromo-sticky-player .track-title {
        font-size: 14px;
    }
    
    .kpromo-sticky-player .track-artist {
        font-size: 12px;
    }
    
    .kpromo-sticky-player .sticky-artwork {
        width: 50px;
        height: 50px;
    }
    
    .kpromo-sticky-player .play-btn {
        width: 40px;
        height: 40px;
    }
    
    .kpromo-sticky-player .play-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* ================================
   FLOATING PLAYER RESPONSIVE
   ================================ */

.kpromo-floating-player {
    position: fixed;
    bottom: var(--kpromo-spacing-lg);
    right: var(--kpromo-spacing-lg);
    z-index: 1001;
    width: 320px;
    max-width: calc(100vw - 32px);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(20px);
}

@media (max-width: 767px) {
    .kpromo-floating-player {
        bottom: var(--kpromo-spacing-md);
        right: var(--kpromo-spacing-md);
        left: var(--kpromo-spacing-md);
        width: auto;
        max-width: none;
    }
}

/* ================================
   ACCESSIBILITY RESPONSIVE
   ================================ */

@media (prefers-reduced-motion: reduce) {
    .kpromo-player * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: high) {
    .kpromo-player {
        border: 2px solid currentColor;
    }
    
    .play-btn {
        border: 2px solid currentColor;
    }
    
    .progress-bar {
        border: 1px solid currentColor;
    }
}

/* ================================
   PRINT STYLES
   ================================ */

@media print {
    .kpromo-player {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        border: 1px solid black;
    }
    
    .play-btn,
    .download-btn {
        background: white !important;
        color: black !important;
        border: 1px solid black;
    }
    
    .kpromo-waveform,
    .kpromo-visualizer {
        display: none;
    }
}

/* ================================
   REDUCED DATA MODE
   ================================ */

@media (prefers-reduced-data: reduce) {
    .kpromo-waveform {
        display: none;
    }
    
    .kpromo-visualizer {
        display: none;
    }
    
    .artwork-image {
        content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSIjZjNmNGY2Ii8+CjxwYXRoIGQ9Ik0zNSA0NUw2NSA1MFYxMDBINDBWNTVMMzUgNDVaIiBmaWxsPSIjOWNhM2FmIi8+Cjwvc3ZnPgo=');
    }
}

/* ================================
   DARK MODE RESPONSIVE
   ================================ */

@media (prefers-color-scheme: dark) {
    .kpromo-player:not([class*="kpromo-skin-"]) {
        background: #1f2937;
        color: #f9fafb;
        border-color: #374151;
    }
    
    .kpromo-player:not([class*="kpromo-skin-"]) .kpromo-controls {
        background: rgba(31, 41, 55, 0.9);
    }
    
    .kpromo-player:not([class*="kpromo-skin-"]) .play-btn {
        background: #3b82f6;
        color: white;
    }
    
    .kpromo-sticky-player {
        background: rgba(31, 41, 55, 0.95);
        border-top-color: rgba(255, 255, 255, 0.1);
    }
    
    .kpromo-floating-player {
        background: rgba(31, 41, 55, 0.95);
    }
}

/* ================================
   HIGH DPI / RETINA DISPLAYS
   ================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .artwork-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    .play-btn svg,
    .download-btn svg {
        stroke-width: 1.5px;
    }
}