/**
 * MKM Bix - Share Buttons
 * Social share button styles
 * @package MKM_Bix
 */

/* ==================== SHARE BUTTONS WRAPPER ==================== */
.mkm-share-buttons {
    display: flex;
    align-items: center;
    gap: var(--mkm-space-3);
    flex-wrap: wrap;
}

/* ==================== SHARE LABEL ==================== */
.mkm-share-label {
    font-size: var(--mkm-fs-sm);
    font-weight: var(--mkm-fw-medium);
    color: var(--mkm-gray-700);
}

/* ==================== SHARE BUTTON ==================== */
.mkm-share-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mkm-radius-full);
    transition: all var(--mkm-transition-fast);
}

.mkm-share-btn svg {
    width: 18px;
    height: 18px;
}

.mkm-share-btn:hover {
    transform: translateY(-3px);
    color: var(--mkm-white);
}

/* ==================== SHARE BUTTON COLORS ==================== */
.mkm-share-btn.facebook {
    background: #e7f3ff;
    color: #1877f2;
}

.mkm-share-btn.facebook:hover {
    background: #1877f2;
}

.mkm-share-btn.twitter {
    background: #f0f0f0;
    color: #000000;
}

.mkm-share-btn.twitter:hover {
    background: #000000;
}

.mkm-share-btn.whatsapp {
    background: #e8f8ed;
    color: #25d366;
}

.mkm-share-btn.whatsapp:hover {
    background: #25d366;
}

.mkm-share-btn.linkedin {
    background: #e8f4fc;
    color: #0a66c2;
}

.mkm-share-btn.linkedin:hover {
    background: #0a66c2;
}

.mkm-share-btn.pinterest {
    background: #fce8e8;
    color: #e60023;
}

.mkm-share-btn.pinterest:hover {
    background: #e60023;
}

.mkm-share-btn.telegram {
    background: #e6f4fb;
    color: #0088cc;
}

.mkm-share-btn.telegram:hover {
    background: #0088cc;
}

.mkm-share-btn.email {
    background: var(--mkm-gray-100);
    color: var(--mkm-gray-700);
}

.mkm-share-btn.email:hover {
    background: var(--mkm-gray-700);
}

.mkm-share-btn.copy {
    background: var(--mkm-gray-100);
    color: var(--mkm-gray-700);
}

.mkm-share-btn.copy:hover {
    background: var(--mkm-primary);
}

/* ==================== SHARE BUTTON WITH TEXT ==================== */
.mkm-share-btn-text {
    display: inline-flex;
    align-items: center;
    gap: var(--mkm-space-2);
    padding: var(--mkm-space-2) var(--mkm-space-4);
    border-radius: var(--mkm-radius-full);
    font-size: var(--mkm-fs-sm);
    font-weight: var(--mkm-fw-medium);
    transition: all var(--mkm-transition-fast);
}

.mkm-share-btn-text svg {
    width: 16px;
    height: 16px;
}

.mkm-share-btn-text.facebook {
    background: #1877f2;
    color: var(--mkm-white);
}

.mkm-share-btn-text.facebook:hover {
    background: #166fe5;
    color: var(--mkm-white);
}

.mkm-share-btn-text.twitter {
    background: #000000;
    color: var(--mkm-white);
}

.mkm-share-btn-text.twitter:hover {
    background: #1a1a1a;
    color: var(--mkm-white);
}

/* ==================== SHARE STICKY ==================== */
.mkm-share-sticky {
    position: fixed;
    left: var(--mkm-space-4);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--mkm-space-2);
    z-index: var(--mkm-z-fixed);
}

/* ==================== SHARE INLINE ==================== */
.mkm-share-inline {
    display: flex;
    align-items: center;
    gap: var(--mkm-space-2);
}

/* ==================== SHARE FULL WIDTH ==================== */
.mkm-share-full {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--mkm-space-3);
}

.mkm-share-full .mkm-share-btn-text {
    width: 100%;
    justify-content: center;
    padding: var(--mkm-space-3);
}