/**
 * BizFactory Social Sharing Brick — Styles
 * Reusable across projects. Uses CSS custom properties for theming.
 */

:root {
    --share-icon-size: 36px;
    --share-gap: 8px;
    --share-bar-padding: 8px 0 2px;
}

/* Share toggle button — sits in feedback/action rows */
.sv-share-btn {
    margin-left: auto;
    border-color: var(--sv-accent, #D4A853) !important;
    color: var(--sv-text-light, #6B6B6B);
    font-size: 0.8rem !important;
    background: none;
    border: 2px solid;
    border-radius: 20px;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.8;
}
.sv-share-btn:hover {
    opacity: 1;
    border-color: var(--sv-primary, #4A6741) !important;
}

/* Social share bar — row of platform icons */
.sv-share-bar {
    width: 100%;
    display: flex;
    gap: var(--share-gap);
    margin-top: 8px;
    padding: var(--share-bar-padding);
    justify-content: center;
    flex-wrap: wrap;
}
.sv-share-bar a { text-decoration: none; }

/* Platform icon circles */
.sv-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--share-icon-size);
    height: var(--share-icon-size);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    transition: transform 0.15s, opacity 0.15s;
    cursor: pointer;
}
.sv-social-icon:hover {
    transform: scale(1.15);
    opacity: 0.85;
}

/* Platform brand colors */
.sv-si-x { background: #000; }
.sv-si-reddit { background: #FF4500; }
.sv-si-whatsapp { background: #25D366; }
.sv-si-telegram { background: #0088CC; }
.sv-si-instagram { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); }
.sv-si-tiktok { background: #010101; }

/* Responsive — smaller icons on narrow screens */
@media (max-width: 360px) {
    :root {
        --share-icon-size: 30px;
        --share-gap: 6px;
    }
    .sv-social-icon { font-size: 0.65rem; }
}