/* ═══════════════════════════════════════════════════════════
   KOKOBEO FIX - Logo K 3D + Video Overlay Mobile
   ═══════════════════════════════════════════════════════════
   Corregge la visibilità del logo K e play button su mobile
   ═══════════════════════════════════════════════════════════ */

/* Fix Logo K 3D - Più visibile */
.logo-k-3d {
    font-size: 200px !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #ffffff, #10b981) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 25px 50px rgba(0,0,0,0.8)) 
            drop-shadow(0 0 80px rgba(16,185,129,0.9)) !important;
    text-shadow: 0 0 20px rgba(255,255,255,0.5) !important;
    animation: pulse-k-fix 2.5s infinite !important;
    margin-bottom: 40px !important;
    z-index: 100 !important;
    position: relative !important;
}

@keyframes pulse-k-fix {
    0%, 100% { 
        transform: scale(1) rotateY(0deg);
        opacity: 1;
    }
    50% { 
        transform: scale(1.1) rotateY(5deg);
        opacity: 0.95;
    }
}

/* Fix Play Button - Più grande e visibile */
.video-play {
    width: 120px !important;
    height: 120px !important;
    background: rgba(255,255,255,0.98) !important;
    border: 5px solid rgba(16,185,129,0.8) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6),
                0 0 100px rgba(16,185,129,0.8),
                inset 0 0 30px rgba(16,185,129,0.3) !important;
    z-index: 99 !important;
    position: relative !important;
}

.video-play::after {
    color: #059669 !important;
    font-size: 50px !important;
    margin-left: 10px !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important;
}

/* Fix Video Text - Più visibile */
.video-text {
    color: #ffffff !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    text-shadow: 0 4px 16px rgba(0,0,0,0.8),
                 0 0 40px rgba(0,0,0,0.6) !important;
    background: rgba(0,0,0,0.3) !important;
    padding: 12px 24px !important;
    border-radius: 12px !important;
    backdrop-filter: blur(5px) !important;
    margin-bottom: 15px !important;
}

.video-subtext {
    color: #d1fae5 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-shadow: 0 3px 12px rgba(0,0,0,0.7) !important;
    background: rgba(0,0,0,0.25) !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    backdrop-filter: blur(3px) !important;
}

/* Fix Video Overlay - Sfondo più scuro */
.video-overlay {
    background: rgba(6,95,70,0.92) !important;
}

.video-overlay:hover {
    background: rgba(6,95,70,0.85) !important;
}

/* Fix Mobile - Logo K più piccolo su schermi piccoli */
@media (max-width: 768px) {
    .logo-k-3d {
        font-size: 140px !important;
        margin-bottom: 25px !important;
    }
    
    .video-play {
        width: 100px !important;
        height: 100px !important;
    }
    
    .video-play::after {
        font-size: 42px !important;
    }
    
    .video-text {
        font-size: 24px !important;
        padding: 10px 20px !important;
    }
    
    .video-subtext {
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {
    .logo-k-3d {
        font-size: 110px !important;
    }
    
    .video-play {
        width: 85px !important;
        height: 85px !important;
    }
    
    .video-text {
        font-size: 20px !important;
    }
}