/**
 * KPromoSender - Player Skins CSS
 * Sistema di skin professionali per il player avanzato
 * Version: 2.0.2
 */

/* ================================
   SKIN BASE VARIABLES
   ================================ */

:root {
    /* Default Skin */
    --kpromo-skin-primary: #2563eb;
    --kpromo-skin-secondary: #f1f5f9;
    --kpromo-skin-accent: #0ea5e9;
    --kpromo-skin-text: #1e293b;
    --kpromo-skin-text-light: #64748b;
    --kpromo-skin-border: #e2e8f0;
    --kpromo-skin-shadow: rgba(0, 0, 0, 0.1);
    --kpromo-skin-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* ================================
   MODERN SKIN (Default)
   ================================ */

.kpromo-skin-modern {
    --kpromo-skin-primary: #2563eb;
    --kpromo-skin-secondary: #f8fafc;
    --kpromo-skin-accent: #0ea5e9;
    --kpromo-skin-text: #1e293b;
    --kpromo-skin-text-light: #64748b;
    --kpromo-skin-border: #e2e8f0;
    --kpromo-skin-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --kpromo-skin-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    border-radius: 16px;
    box-shadow: var(--kpromo-skin-shadow);
    overflow: hidden;
}

.kpromo-skin-modern .kpromo-controls {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.kpromo-skin-modern .play-btn {
    background: var(--kpromo-skin-gradient);
    border: none;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.kpromo-skin-modern .play-btn:hover {
    transform: scale(1.1);
}

/* ================================
   MINIMAL SKIN
   ================================ */

.kpromo-skin-minimal {
    --kpromo-skin-primary: #000000;
    --kpromo-skin-secondary: #ffffff;
    --kpromo-skin-accent: #6b7280;
    --kpromo-skin-text: #111827;
    --kpromo-skin-text-light: #6b7280;
    --kpromo-skin-border: #e5e7eb;
    --kpromo-skin-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    
    border-radius: 8px;
    border: 1px solid var(--kpromo-skin-border);
    background: var(--kpromo-skin-secondary);
}

.kpromo-skin-minimal .kpromo-controls {
    background: transparent;
    padding: 16px;
}

.kpromo-skin-minimal .play-btn {
    background: var(--kpromo-skin-primary);
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
}

.kpromo-skin-minimal .track-info {
    font-weight: 400;
}

/* ================================
   DARK SKIN
   ================================ */

.kpromo-skin-dark {
    --kpromo-skin-primary: #60a5fa;
    --kpromo-skin-secondary: #1f2937;
    --kpromo-skin-accent: #3b82f6;
    --kpromo-skin-text: #f9fafb;
    --kpromo-skin-text-light: #9ca3af;
    --kpromo-skin-border: #374151;
    --kpromo-skin-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    --kpromo-skin-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    border-radius: 20px;
    border: 1px solid var(--kpromo-skin-border);
    box-shadow: var(--kpromo-skin-shadow);
}

.kpromo-skin-dark .kpromo-controls {
    background: rgba(31, 41, 55, 0.9);
    backdrop-filter: blur(10px);
}

.kpromo-skin-dark .play-btn {
    background: var(--kpromo-skin-gradient);
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3);
}

.kpromo-skin-dark .track-time,
.kpromo-skin-dark .track-duration {
    color: var(--kpromo-skin-text-light);
}

/* ================================
   GLASSMORPHISM SKIN
   ================================ */

.kpromo-skin-glass {
    --kpromo-skin-primary: #8b5cf6;
    --kpromo-skin-secondary: rgba(255, 255, 255, 0.1);
    --kpromo-skin-accent: #a78bfa;
    --kpromo-skin-text: #ffffff;
    --kpromo-skin-text-light: rgba(255, 255, 255, 0.7);
    --kpromo-skin-border: rgba(255, 255, 255, 0.2);
    --kpromo-skin-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid var(--kpromo-skin-border);
    box-shadow: var(--kpromo-skin-shadow);
}

.kpromo-skin-glass .kpromo-controls {
    background: transparent;
}

.kpromo-skin-glass .play-btn {
    background: rgba(139, 92, 246, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.kpromo-skin-glass .progress-bar {
    background: rgba(255, 255, 255, 0.2);
}

.kpromo-skin-glass .progress-fill {
    background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%);
}

/* ================================
   NEON SKIN
   ================================ */

.kpromo-skin-neon {
    --kpromo-skin-primary: #00ff88;
    --kpromo-skin-secondary: #0a0a0a;
    --kpromo-skin-accent: #00ccff;
    --kpromo-skin-text: #ffffff;
    --kpromo-skin-text-light: #888888;
    --kpromo-skin-border: #00ff88;
    --kpromo-skin-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
    
    background: #0a0a0a;
    border: 2px solid var(--kpromo-skin-border);
    border-radius: 16px;
    box-shadow: var(--kpromo-skin-shadow);
    position: relative;
    overflow: hidden;
}

.kpromo-skin-neon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(0, 255, 136, 0.1), transparent);
    animation: neonPulse 2s infinite;
}

@keyframes neonPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.kpromo-skin-neon .kpromo-controls {
    background: rgba(10, 10, 10, 0.95);
    position: relative;
    z-index: 1;
}

.kpromo-skin-neon .play-btn {
    background: linear-gradient(135deg, #00ff88 0%, #00ccff 100%);
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
    animation: neonGlow 1.5s infinite alternate;
}

@keyframes neonGlow {
    from { box-shadow: 0 0 15px rgba(0, 255, 136, 0.5); }
    to { box-shadow: 0 0 25px rgba(0, 255, 136, 0.8); }
}

.kpromo-skin-neon .track-title {
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

/* ================================
   RETRO SKIN
   ================================ */

.kpromo-skin-retro {
    --kpromo-skin-primary: #ff6b35;
    --kpromo-skin-secondary: #f7f3e9;
    --kpromo-skin-accent: #ffd23f;
    --kpromo-skin-text: #2c3e50;
    --kpromo-skin-text-light: #7f8c8d;
    --kpromo-skin-border: #ff6b35;
    --kpromo-skin-shadow: 4px 4px 0px #ff6b35;
    
    background: var(--kpromo-skin-secondary);
    border: 3px solid var(--kpromo-skin-border);
    border-radius: 0;
    box-shadow: var(--kpromo-skin-shadow);
    font-family: 'Courier New', monospace;
}

.kpromo-skin-retro .kpromo-controls {
    background: transparent;
    padding: 20px;
}

.kpromo-skin-retro .play-btn {
    background: var(--kpromo-skin-primary);
    border: 3px solid #2c3e50;
    border-radius: 0;
    box-shadow: 2px 2px 0px #2c3e50;
    font-weight: bold;
    text-transform: uppercase;
}

.kpromo-skin-retro .play-btn:hover {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px #2c3e50;
}

.kpromo-skin-retro .track-title {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ================================
   PROFESSIONAL SKIN
   ================================ */

.kpromo-skin-professional {
    --kpromo-skin-primary: #1a73e8;
    --kpromo-skin-secondary: #ffffff;
    --kpromo-skin-accent: #34a853;
    --kpromo-skin-text: #202124;
    --kpromo-skin-text-light: #5f6368;
    --kpromo-skin-border: #dadce0;
    --kpromo-skin-shadow: 0 2px 10px 0 rgba(60, 64, 67, 0.15);
    
    background: var(--kpromo-skin-secondary);
    border: 1px solid var(--kpromo-skin-border);
    border-radius: 12px;
    box-shadow: var(--kpromo-skin-shadow);
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}

.kpromo-skin-professional .kpromo-controls {
    background: transparent;
    padding: 24px;
}

.kpromo-skin-professional .play-btn {
    background: var(--kpromo-skin-primary);
    border: none;
    border-radius: 8px;
    font-weight: 500;
    letter-spacing: 0.1px;
    transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.kpromo-skin-professional .play-btn:hover {
    background: #1557b0;
    box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.30);
}

.kpromo-skin-professional .track-info {
    font-weight: 400;
    line-height: 1.5;
}

/* ================================
   ADAPTIVE COLORS
   ================================ */

.kpromo-player.adaptive-colors {
    transition: all 0.3s ease;
}

.kpromo-player.adaptive-colors.dominant-warm {
    --kpromo-adaptive-primary: var(--kpromo-dominant-color, #ff6b35);
    --kpromo-adaptive-secondary: var(--kpromo-secondary-color, #fff5f0);
    --kpromo-adaptive-accent: var(--kpromo-accent-color, #ff8c65);
}

.kpromo-player.adaptive-colors.dominant-cool {
    --kpromo-adaptive-primary: var(--kpromo-dominant-color, #2563eb);
    --kpromo-adaptive-secondary: var(--kpromo-secondary-color, #f0f4ff);
    --kpromo-adaptive-accent: var(--kpromo-accent-color, #60a5fa);
}

.kpromo-player.adaptive-colors.dominant-neutral {
    --kpromo-adaptive-primary: var(--kpromo-dominant-color, #6b7280);
    --kpromo-adaptive-secondary: var(--kpromo-secondary-color, #f9fafb);
    --kpromo-adaptive-accent: var(--kpromo-accent-color, #9ca3af);
}

/* Apply adaptive colors when enabled */
.kpromo-player.adaptive-colors .play-btn {
    background: var(--kpromo-adaptive-primary, var(--kpromo-skin-primary));
}

.kpromo-player.adaptive-colors .progress-fill {
    background: var(--kpromo-adaptive-accent, var(--kpromo-skin-accent));
}

.kpromo-player.adaptive-colors .kpromo-controls {
    background: var(--kpromo-adaptive-secondary, var(--kpromo-skin-secondary));
}

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

@media (max-width: 768px) {
    .kpromo-skin-retro {
        border-width: 2px;
        box-shadow: 2px 2px 0px #ff6b35;
    }
    
    .kpromo-skin-retro .play-btn {
        border-width: 2px;
        box-shadow: 1px 1px 0px #2c3e50;
    }
    
    .kpromo-skin-neon {
        border-width: 1px;
    }
    
    .kpromo-skin-glass {
        backdrop-filter: blur(15px);
    }
}