/**
 * Social Links Plugin - Styles
 *
 * Provides basic styling for social links and share buttons.
 * Uses Bootstrap Icons (bi-*) which are already loaded in the admin.
 */

/* ==========================================================================
   SOCIAL PROFILE LINKS
   ========================================================================== */

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.social-links-stacked {
    flex-direction: column;
    align-items: flex-start;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #6c757d;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
    font-size: 1.1rem;
}

.social-link:hover {
    transform: scale(1.1);
    color: #fff;
}

/* Platform-specific colors */
.social-link.social-facebook:hover { background-color: #1877f2; }
.social-link.social-instagram:hover { background-color: #e4405f; }
.social-link.social-twitter:hover { background-color: #000000; }
.social-link.social-threads:hover { background-color: #000000; }
.social-link.social-tiktok:hover { background-color: #000000; }
.social-link.social-youtube:hover { background-color: #ff0000; }
.social-link.social-linkedin:hover { background-color: #0a66c2; }
.social-link.social-pinterest:hover { background-color: #bd081c; }
.social-link.social-whatsapp:hover { background-color: #25d366; }
.social-link.social-telegram:hover { background-color: #0088cc; }
.social-link.social-discord:hover { background-color: #5865f2; }
.social-link.social-snapchat:hover { background-color: #fffc00; color: #000; }
.social-link.social-twitch:hover { background-color: #9146ff; }

/* With labels */
.social-links .social-label {
    margin-left: 0.5rem;
}

.social-links-stacked .social-link {
    width: auto;
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
}

/* ==========================================================================
   SOCIAL SHARE BUTTONS
   ========================================================================== */

.social-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.share-buttons-stacked {
    flex-direction: column;
    align-items: stretch;
}

.share-buttons-floating {
    position: fixed;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    z-index: 1000;
    background: #fff;
    padding: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: none;
    background-color: #6c757d;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
    font-size: 1.1rem;
    cursor: pointer;
}

.share-btn:hover {
    transform: scale(1.1);
    color: #fff;
}

/* Platform-specific colors for share buttons */
.share-btn.share-facebook { background-color: #1877f2; }
.share-btn.share-twitter { background-color: #000000; }
.share-btn.share-linkedin { background-color: #0a66c2; }
.share-btn.share-pinterest { background-color: #bd081c; }
.share-btn.share-whatsapp { background-color: #25d366; }
.share-btn.share-telegram { background-color: #0088cc; }
.share-btn.share-reddit { background-color: #ff4500; }
.share-btn.share-email { background-color: #6c757d; }
.share-btn.share-copy { background-color: #495057; }

.share-btn.share-facebook:hover { background-color: #166fe5; }
.share-btn.share-twitter:hover { background-color: #333; }
.share-btn.share-linkedin:hover { background-color: #004182; }
.share-btn.share-pinterest:hover { background-color: #a00d1a; }
.share-btn.share-whatsapp:hover { background-color: #1ebe57; }
.share-btn.share-telegram:hover { background-color: #006daa; }
.share-btn.share-reddit:hover { background-color: #e03d00; }
.share-btn.share-email:hover { background-color: #5a6268; }
.share-btn.share-copy:hover { background-color: #343a40; }

/* With labels */
.share-btn .share-label {
    margin-left: 0.5rem;
}

.share-buttons-stacked .share-btn {
    width: 100%;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    justify-content: flex-start;
}

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

@media (max-width: 768px) {
    .share-buttons-floating {
        position: fixed;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        transform: none;
        flex-direction: row;
        justify-content: center;
        border-radius: 0;
        padding: 0.75rem;
    }
}