/* ====================================
   CLASSIC TEMPLATE - Standalone CSS
   Vertikale Link-Liste mit Hover-Effekten
   ==================================== */

.links-container.template-classic {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 680px !important;
}

.links-container.template-classic .link-item {
    background: white !important;
    padding: 1.125rem 1.5rem !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    transition: all 0.3s ease !important;
    border: 2px solid #e2e8f0 !important;
    position: relative !important;
    overflow: hidden !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: #2d3748 !important;
}

.links-container.template-classic .link-item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent) !important;
    transition: left 0.5s ease !important;
}

.links-container.template-classic .link-item:hover::before {
    left: 100% !important;
}

.links-container.template-classic .link-item:hover {
    transform: translateY(-2px) !important;
    border-color: #667eea !important;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2) !important;
}

.links-container.template-classic .link-item:active {
    transform: translateY(0) !important;
}

.links-container.template-classic .link-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    border-radius: 4px !important;
}

/* Default: Images without specific class - keep compatibility */
.links-container.template-classic .link-icon img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
}

/* Custom icons - stretch mode fills entire icon area */
.links-container.template-classic .link-icon img.custom-icon-stretch {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
}

/* Remove any background for stretch icons */
.links-container.template-classic .link-icon:has(img.custom-icon-stretch) {
    position: relative !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Fallback positioning */
.links-container.template-classic .link-icon {
    position: relative !important;
}

/* Custom icons - centered mode uses contain for proper fitting */
.links-container.template-classic .link-icon img.custom-icon-centered {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
}

.links-container.template-classic .link-icon svg {
    width: 100% !important;
    height: 100% !important;
    transition: fill 0.3s ease !important;
}

.links-container.template-classic .link-content {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.links-container.template-classic .link-title {
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: inherit !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ============ PLATFORM-SPECIFIC HOVER COLORS ============ */

.links-container.template-classic .link-item.instagram { border-color: #E4405F !important; }
.links-container.template-classic .link-item.instagram:hover { 
    border-color: #E4405F !important; 
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; 
    color: white !important; 
}
.links-container.template-classic .link-item.instagram:hover .link-icon svg { fill: white !important; }

.links-container.template-classic .link-item.youtube { border-color: #FF0000 !important; }
.links-container.template-classic .link-item.youtube:hover { 
    border-color: #FF0000 !important; 
    background: #FF0000 !important; 
    color: white !important; 
}
.links-container.template-classic .link-item.youtube:hover .link-icon svg { fill: white !important; }

.links-container.template-classic .link-item.tiktok { border-color: #000000 !important; }
.links-container.template-classic .link-item.tiktok:hover { 
    border-color: #000000 !important; 
    background: #000000 !important; 
    color: white !important; 
}
.links-container.template-classic .link-item.tiktok:hover .link-icon svg path { fill: white !important; }

.links-container.template-classic .link-item.discord { border-color: #5865F2 !important; }
.links-container.template-classic .link-item.discord:hover { 
    border-color: #5865F2 !important; 
    background: #5865F2 !important; 
    color: white !important; 
}
.links-container.template-classic .link-item.discord:hover .link-icon svg { fill: white !important; }

.links-container.template-classic .link-item.twitch { border-color: #9146FF !important; }
.links-container.template-classic .link-item.twitch:hover { 
    border-color: #9146FF !important; 
    background: #9146FF !important; 
    color: white !important; 
}
.links-container.template-classic .link-item.twitch:hover .link-icon svg { fill: white !important; }

.links-container.template-classic .link-item.facebook { border-color: #1877F2 !important; }
.links-container.template-classic .link-item.facebook:hover { 
    border-color: #1877F2 !important; 
    background: #1877F2 !important; 
    color: white !important; 
}
.links-container.template-classic .link-item.facebook:hover .link-icon svg { fill: white !important; }

.links-container.template-classic .link-item.twitter { border-color: #1DA1F2 !important; }
.links-container.template-classic .link-item.twitter:hover { 
    border-color: #1DA1F2 !important; 
    background: #1DA1F2 !important; 
    color: white !important; 
}
.links-container.template-classic .link-item.twitter:hover .link-icon svg { fill: white !important; }

.links-container.template-classic .link-item.linkedin { border-color: #0A66C2 !important; }
.links-container.template-classic .link-item.linkedin:hover { 
    border-color: #0A66C2 !important; 
    background: #0A66C2 !important; 
    color: white !important; 
}
.links-container.template-classic .link-item.linkedin:hover .link-icon svg { fill: white !important; }

.links-container.template-classic .link-item.github { border-color: #333 !important; }
.links-container.template-classic .link-item.github:hover { 
    border-color: #333 !important; 
    background: #333 !important; 
    color: white !important; }
.links-container.template-classic .link-item.github:hover .link-icon svg { fill: white !important; }

.links-container.template-classic .link-item.website { border-color: #667eea !important; }
.links-container.template-classic .link-item.website:hover { 
    border-color: #667eea !important; 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; 
    color: white !important; 
}
.links-container.template-classic .link-item.website:hover .link-icon svg { fill: white !important; }

.links-container.template-classic .link-item.email { border-color: #EA4335 !important; }
.links-container.template-classic .link-item.email:hover { 
    border-color: #EA4335 !important; 
    background: #EA4335 !important; 
    color: white !important; 
}
.links-container.template-classic .link-item.email:hover .link-icon svg { fill: white !important; }

.links-container.template-classic .link-item.whatsapp { border-color: #25D366 !important; }
.links-container.template-classic .link-item.whatsapp:hover { 
    border-color: #25D366 !important; 
    background: #25D366 !important; 
    color: white !important; 
}
.links-container.template-classic .link-item.whatsapp:hover .link-icon svg { fill: white !important; }

.links-container.template-classic .link-item.snapchat { border-color: #FFFC00 !important; }
.links-container.template-classic .link-item.snapchat:hover { 
    border-color: #FFFC00 !important; 
    background: #FFFC00 !important; 
    color: #000 !important; 
}
.links-container.template-classic .link-item.snapchat:hover .link-icon svg { fill: #000 !important; }

.links-container.template-classic .link-item.x { border-color: #000000 !important; }
.links-container.template-classic .link-item.x:hover { 
    border-color: #000000 !important; 
    background: #000000 !important; 
    color: white !important; 
}
.links-container.template-classic .link-item.x:hover .link-icon svg { fill: white !important; }

.links-container.template-classic .link-item.pinterest { border-color: #E60023 !important; }
.links-container.template-classic .link-item.pinterest:hover { 
    border-color: #E60023 !important; 
    background: #E60023 !important; 
    color: white !important; 
}
.links-container.template-classic .link-item.pinterest:hover .link-icon svg { fill: white !important; }

.links-container.template-classic .link-item.reddit { border-color: #FF4500 !important; }
.links-container.template-classic .link-item.reddit:hover { 
    border-color: #FF4500 !important; 
    background: #FF4500 !important; 
    color: white !important; 
}
.links-container.template-classic .link-item.reddit:hover .link-icon svg { fill: white !important; }

.links-container.template-classic .link-item.spotify { border-color: #1DB954 !important; }
.links-container.template-classic .link-item.spotify:hover { 
    border-color: #1DB954 !important; 
    background: #1DB954 !important; 
    color: white !important; 
}
.links-container.template-classic .link-item.spotify:hover .link-icon svg { fill: white !important; }

.links-container.template-classic .link-item.telegram { border-color: #26A5E4 !important; }
.links-container.template-classic .link-item.telegram:hover { 
    border-color: #26A5E4 !important; 
    background: #26A5E4 !important; 
    color: white !important; 
}
.links-container.template-classic .link-item.telegram:hover .link-icon svg { fill: white !important; }

.links-container.template-classic .link-item.kofi { border-color: #FF5E5B !important; }
.links-container.template-classic .link-item.kofi:hover { 
    border-color: #FF5E5B !important; 
    background: #FF5E5B !important; 
    color: white !important; 
}
.links-container.template-classic .link-item.kofi:hover .link-icon svg { fill: white !important; }

.links-container.template-classic .link-item.phone { border-color: #34A853 !important; }
.links-container.template-classic .link-item.phone:hover { 
    border-color: #34A853 !important; 
    background: #34A853 !important; 
    color: white !important; 
}
.links-container.template-classic .link-item.phone:hover .link-icon svg { fill: white !important; }

/* Custom icons with dominant color - use CSS variable for border and hover */
.links-container.template-classic .link-item[style*="--dominant-color"] {
    border-color: var(--dominant-color) !important;
}

.links-container.template-classic .link-item[style*="--dominant-color"]:hover {
    background: var(--dominant-color) !important;
    color: white !important;
    border-color: var(--dominant-color) !important;
}

.links-container.template-classic .link-item[style*="--dominant-color"]:hover .link-icon svg {
    fill: white !important;
}

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

@media (max-width: 768px) {
    .links-container.template-classic .link-item {
        padding: 1rem 1.25rem !important;
    }
}

@media (max-width: 480px) {
    .links-container.template-classic {
        max-width: 400px !important;
    }
    
    .links-container.template-classic .link-item {
        padding: 1rem 1.25rem !important;
    }
}