/* Social Media Icons CSS - Business Directory Plugin
 * 
 * This file contains styles for all social media icons used in the business directory.
 * Icons are stored as SVG files in the assets/icons/social-media/ folder.
 * 
 * Features:
 * - Custom SVG icons for all major platforms
 * - Hover effects and animations
 * - Responsive design
 * - Color-coded platform identification
 * - Accessibility features
 */

/* ==== SOCIAL MEDIA ICONS CONTAINER ==== */

.business-directory-container .social-links {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    margin-top: 15px !important;
    padding: 10px 0 !important;
    flex-wrap: wrap !important;
}

/* ==== BASE SOCIAL LINK STYLES ==== */

.business-directory-container .social-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    border: 2px solid transparent !important;
}

.business-directory-container .social-link:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

.business-directory-container .social-link:focus {
    outline: 2px solid #667eea !important;
    outline-offset: 2px !important;
}

.business-directory-container .social-link:active {
    transform: scale(0.95) !important;
}

/* ==== PLATFORM-SPECIFIC ICONS ==== */

/* Phone Icon */
.business-directory-container .social-link.phone {
    background: #4285f4 !important;
    color: white !important;
}

.business-directory-container .social-link.phone:hover {
    background: #3367d6 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.4) !important;
}

/* Email Icon */
.business-directory-container .social-link.email {
    background: #ea4335 !important;
    color: white !important;
}

.business-directory-container .social-link.email:hover {
    background: #d33426 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(234, 67, 53, 0.4) !important;
}

/* Website Icon */
.business-directory-container .social-link.website {
    background: #34a853 !important;
    color: white !important;
}

.business-directory-container .social-link.website:hover {
    background: #2d8f47 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(52, 168, 83, 0.4) !important;
}

/* Facebook */
.business-directory-container .social-link.facebook {
    background: #1877f2 !important;
    color: white !important;
}

.business-directory-container .social-link.facebook:hover {
    background: #166fe5 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.4) !important;
}

/* Twitter/X */
.business-directory-container .social-link.twitter {
    background: #000000 !important;
    color: white !important;
}

.business-directory-container .social-link.twitter:hover {
    background: #333333 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Instagram */
.business-directory-container .social-link.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
    color: white !important;
}

.business-directory-container .social-link.instagram:hover {
    background: linear-gradient(45deg, #e0852e 0%, #d55e37 25%, #c7223e 50%, #b71f5b 75%, #a7157a 100%) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(220, 39, 67, 0.4) !important;
}

/* LinkedIn */
.business-directory-container .social-link.linkedin {
    background: #0077b5 !important;
    color: white !important;
}

.business-directory-container .social-link.linkedin:hover {
    background: #006097 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0, 119, 181, 0.4) !important;
}

/* YouTube */
.business-directory-container .social-link.youtube {
    background: #ff0000 !important;
    color: white !important;
}

.business-directory-container .social-link.youtube:hover {
    background: #cc0000 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4) !important;
}

/* WhatsApp */
.business-directory-container .social-link.whatsapp {
    background: #25d366 !important;
    color: white !important;
}

.business-directory-container .social-link.whatsapp:hover {
    background: #20ba5a !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4) !important;
}

/* Telegram */
.business-directory-container .social-link.telegram {
    background: #0088cc !important;
    color: white !important;
}

.business-directory-container .social-link.telegram:hover {
    background: #0077b3 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.4) !important;
}

/* TikTok */
.business-directory-container .social-link.tiktok {
    background: #000000 !important;
    color: white !important;
}

.business-directory-container .social-link.tiktok:hover {
    background: #333333 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Snapchat */
.business-directory-container .social-link.snapchat {
    background: #fffc00 !important;
    color: #000000 !important;
}

.business-directory-container .social-link.snapchat:hover {
    background: #e6e300 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(255, 252, 0, 0.4) !important;
}

/* Pinterest */
.business-directory-container .social-link.pinterest {
    background: #bd081c !important;
    color: white !important;
}

.business-directory-container .social-link.pinterest:hover {
    background: #a00718 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(189, 8, 28, 0.4) !important;
}

/* Discord */
.business-directory-container .social-link.discord {
    background: #5865f2 !important;
    color: white !important;
}

.business-directory-container .social-link.discord:hover {
    background: #4752c4 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4) !important;
}

/* Reddit */
.business-directory-container .social-link.reddit {
    background: #ff4500 !important;
    color: white !important;
}

.business-directory-container .social-link.reddit:hover {
    background: #cc3700 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(255, 69, 0, 0.4) !important;
}

/* ==== ICON STYLING ==== */

.business-directory-container .social-link svg {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor !important;
}

.business-directory-container .social-link i {
    font-size: 16px !important;
    font-weight: 600 !important;
    display: block !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* ==== ENHANCED EFFECTS ==== */

/* Shimmer Effect */
.business-directory-container .social-link::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.6s ease !important;
}

.business-directory-container .social-link:hover::before {
    transform: translateX(100%) !important;
}

/* Pulse Animation */
@keyframes socialIconPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.business-directory-container .social-link:hover svg,
.business-directory-container .social-link:hover i {
    animation: socialIconPulse 0.6s ease-in-out !important;
}

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

@media (max-width: 768px) {
    .business-directory-container .social-links {
        gap: 8px !important;
        margin-top: 12px !important;
    }
    
    .business-directory-container .social-link {
        width: 36px !important;
        height: 36px !important;
    }
    
    .business-directory-container .social-link svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    .business-directory-container .social-link i {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .business-directory-container .social-links {
        gap: 6px !important;
        margin-top: 10px !important;
    }
    
    .business-directory-container .social-link {
        width: 32px !important;
        height: 32px !important;
    }
    
    .business-directory-container .social-link svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    .business-directory-container .social-link i {
        font-size: 12px !important;
    }
}

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

.business-directory-container .social-link[aria-label]:focus::after {
    content: attr(aria-label) !important;
    position: absolute !important;
    bottom: -30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    z-index: 1000 !important;
}

/* ==== DARK MODE SUPPORT ==== */

@media (prefers-color-scheme: dark) {
    .business-directory-container .social-link {
        border-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    .business-directory-container .social-link:focus {
        outline-color: #60a5fa !important;
    }
}

/* ==== HIGH CONTRAST MODE ==== */

@media (prefers-contrast: high) {
    .business-directory-container .social-link {
        border-width: 3px !important;
    }
    
    .business-directory-container .social-link:hover {
        border-color: #000000 !important;
    }
}

/* ==== REDUCED MOTION ==== */

@media (prefers-reduced-motion: reduce) {
    .business-directory-container .social-link,
    .business-directory-container .social-link:hover,
    .business-directory-container .social-link::before {
        transition: none !important;
        animation: none !important;
    }
    
    .business-directory-container .social-link:hover {
        transform: none !important;
    }
}