/**
 * SukcesAI Icon Styles
 * Professional SVG icon styling
 */

/* Base icon styles */
.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    stroke-width: 2;
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Icon sizes */
.icon-xs { width: 12px; height: 12px; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }
.icon-2xl { width: 48px; height: 48px; }

/* Icon in buttons */
button .icon,
.btn .icon {
    margin-right: 0.5em;
}

button .icon:only-child,
.btn .icon:only-child {
    margin-right: 0;
}

/* Icon button (icon only) */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: inherit;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn-icon .icon {
    width: 20px;
    height: 20px;
}

/* Animated icons */
.icon-spin {
    animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.icon-pulse {
    animation: icon-pulse 1.5s ease-in-out infinite;
}

@keyframes icon-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.icon-bounce {
    animation: icon-bounce 0.6s ease infinite;
}

@keyframes icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Icon colors */
.icon-primary { color: var(--primary-color, #ffc700); }
.icon-secondary { color: var(--secondary-color, #64748b); }
.icon-success { color: var(--success-color, #06B6D4); }
.icon-warning { color: var(--warning-color, #6366F1); }
.icon-danger { color: var(--danger-color, #ef4444); }
.icon-info { color: var(--info-color, #3b82f6); }
.icon-muted { color: rgba(255, 255, 255, 0.5); }

/* Icon with background */
.icon-bg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.15);
}

.icon-bg .icon {
    width: 20px;
    height: 20px;
    color: #ffc700;
}

.icon-bg-success {
    background: rgba(34, 197, 94, 0.15);
}
.icon-bg-success .icon {
    color: #06B6D4;
}

.icon-bg-warning {
    background: rgba(245, 158, 11, 0.15);
}
.icon-bg-warning .icon {
    color: #6366F1;
}

.icon-bg-danger {
    background: rgba(239, 68, 68, 0.15);
}
.icon-bg-danger .icon {
    color: #ef4444;
}

/* Icon with gradient */
.icon-gradient {
    background: linear-gradient(135deg, #ffc700, #06b6d4);
    -webkit-background-clip: text;
    background-clip: text;
}

.icon-gradient .icon {
    stroke: url(#icon-gradient);
}

/* Icon list */
.icon-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.icon-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.icon-list li .icon {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: #06B6D4;
}

/* Feature icon (large, prominent) */
.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.3);
    margin-bottom: 1rem;
}

.feature-icon .icon {
    width: 32px;
    height: 32px;
    color: #ffc700;
}

/* Toolbar icon button */
.toolbar-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.toolbar-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
}

.toolbar-icon-btn.active {
    background: rgba(139, 92, 246, 0.3);
    border-color: rgba(139, 92, 246, 0.5);
    color: #ffd54f;
}

.toolbar-icon-btn .icon {
    width: 18px;
    height: 18px;
}

/* Navigation icon */
.nav-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.2s ease;
}

.nav-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.nav-icon.active {
    background: rgba(139, 92, 246, 0.2);
    color: #ffd54f;
}

.nav-icon .icon {
    width: 20px;
    height: 20px;
}

/* Status icons */
.status-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.status-icon .icon {
    width: 16px;
    height: 16px;
}

.status-icon.status-success {
    background: rgba(34, 197, 94, 0.15);
    color: #06B6D4;
}

.status-icon.status-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #6366F1;
}

.status-icon.status-error {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.status-icon.status-info {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

/* ═══════════════════════════════════════════════════════════
   SOCIAL MEDIA ICONS
   ═══════════════════════════════════════════════════════════ */

/* Social icons - filled style */
.icon-facebook,
.icon-instagram,
.icon-linkedin,
.icon-twitter,
.icon-youtube,
.icon-tiktok,
.icon-pinterest,
.icon-snapchat,
.icon-whatsapp,
.icon-telegram,
.icon-discord,
.icon-slack,
.icon-dribbble,
.icon-behance,
.icon-github,
.icon-medium,
.icon-spotify,
.icon-apple,
.icon-google {
    fill: currentColor;
    stroke: none;
}

/* Social bar container */
.social-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Social link base */
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.social-link .icon,
.social-link .social-icon {
    width: 20px;
    height: 20px;
}

/* Social link sizes */
.social-link-sm {
    width: 32px;
    height: 32px;
}
.social-link-sm .icon { width: 16px; height: 16px; }

.social-link-lg {
    width: 48px;
    height: 48px;
}
.social-link-lg .icon { width: 24px; height: 24px; }

/* Platform-specific colors on hover */
.social-link[aria-label*="facebook"]:hover,
.social-link[aria-label*="Facebook"]:hover {
    background: #1877f2;
    color: white;
}

.social-link[aria-label*="instagram"]:hover,
.social-link[aria-label*="Instagram"]:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: white;
}

.social-link[aria-label*="linkedin"]:hover,
.social-link[aria-label*="LinkedIn"]:hover {
    background: #0a66c2;
    color: white;
}

.social-link[aria-label*="twitter"]:hover,
.social-link[aria-label*="Twitter"]:hover,
.social-link[aria-label*="X"]:hover {
    background: #000000;
    color: white;
}

.social-link[aria-label*="youtube"]:hover,
.social-link[aria-label*="YouTube"]:hover {
    background: #ff0000;
    color: white;
}

.social-link[aria-label*="tiktok"]:hover,
.social-link[aria-label*="TikTok"]:hover {
    background: #000000;
    color: #ff0050;
}

.social-link[aria-label*="pinterest"]:hover,
.social-link[aria-label*="Pinterest"]:hover {
    background: #e60023;
    color: white;
}

.social-link[aria-label*="snapchat"]:hover,
.social-link[aria-label*="Snapchat"]:hover {
    background: #fffc00;
    color: black;
}

.social-link[aria-label*="whatsapp"]:hover,
.social-link[aria-label*="WhatsApp"]:hover {
    background: #25d366;
    color: white;
}

.social-link[aria-label*="telegram"]:hover,
.social-link[aria-label*="Telegram"]:hover {
    background: #0088cc;
    color: white;
}

.social-link[aria-label*="discord"]:hover,
.social-link[aria-label*="Discord"]:hover {
    background: #5865f2;
    color: white;
}

.social-link[aria-label*="slack"]:hover,
.social-link[aria-label*="Slack"]:hover {
    background: #4a154b;
    color: white;
}

.social-link[aria-label*="dribbble"]:hover,
.social-link[aria-label*="Dribbble"]:hover {
    background: #ea4c89;
    color: white;
}

.social-link[aria-label*="behance"]:hover,
.social-link[aria-label*="Behance"]:hover {
    background: #1769ff;
    color: white;
}

.social-link[aria-label*="github"]:hover,
.social-link[aria-label*="GitHub"]:hover {
    background: #333;
    color: white;
}

.social-link[aria-label*="medium"]:hover,
.social-link[aria-label*="Medium"]:hover {
    background: #000;
    color: white;
}

.social-link[aria-label*="spotify"]:hover,
.social-link[aria-label*="Spotify"]:hover {
    background: #1db954;
    color: white;
}

.social-link[aria-label*="apple"]:hover,
.social-link[aria-label*="Apple"]:hover {
    background: #000;
    color: white;
}

.social-link[aria-label*="google"]:hover,
.social-link[aria-label*="Google"]:hover {
    background: #4285f4;
    color: white;
}

.social-link[aria-label*="email"]:hover,
.social-link[aria-label*="Email"]:hover {
    background: #ea4335;
    color: white;
}

/* Social footer section */
.social-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px 0;
}

.social-footer-title {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Inline social icons (in text/headers) */
.social-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.social-inline .social-link {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

.social-inline .social-link .icon {
    width: 14px;
    height: 14px;
}

/* Light theme social links */
.social-link-light {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.6);
}

.social-link-light:hover {
    color: white;
}

/* Circular social links */
.social-link-circle {
    border-radius: 50%;
}

/* Ghost/outline style */
.social-link-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.social-link-ghost:hover {
    border-color: transparent;
}

/* Social share buttons row */
.social-share {
    display: flex;
    align-items: center;
    gap: 8px;
}

.social-share-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-right: 8px;
}

/* Contact icons section */
.contact-icons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-item:hover {
    color: white;
}

.contact-item .icon {
    width: 20px;
    height: 20px;
    color: var(--primary-color, #ffc700);
}

/* Responsive */
@media (max-width: 640px) {
    .social-bar {
        justify-content: center;
    }
    
    .social-link {
        width: 36px;
        height: 36px;
    }
    
    .social-link .icon {
        width: 18px;
        height: 18px;
    }
}