/* Sticky Social Icons - Main Styles */
.ssi-container {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.ssi-icons-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px 0 0 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.ssi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--icon-size) + 20px);
    height: calc(var(--icon-size) + 20px);
    background-color: var(--bg-color);
    color: var(--icon-color);
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ssi-icon:last-child {
    border-bottom: none;
}

.ssi-icon i {
    font-size: var(--icon-size);
    line-height: 1;
    transition: all 0.3s ease;
}

.ssi-icon:hover {
    background-color: var(--hover-color);
    padding-right: 5px;
	color:#fff;
}

.ssi-icon:hover i {
    transform: scale(1.1);
}

/* Platform-specific hover colors (optional) */
.ssi-facebook:hover { background-color: #1877f2 !important; }
.ssi-twitter:hover { background-color: #1da1f2 !important; }
.ssi-instagram:hover { background-color: #e4405f !important; }
.ssi-linkedin:hover { background-color: #0a66c2 !important; }
.ssi-youtube:hover { background-color: #ff0000 !important; }
.ssi-pinterest:hover { background-color: #bd081c !important; }
.ssi-whatsapp:hover { background-color: #25d366 !important; }

/* Responsive Styles */
@media screen and (max-width: 768px) {
    .ssi-container {
        right: -5px;
    }
    
    .ssi-icons-wrapper {
        border-radius: 12px 0 0 12px;
    }
    
    .ssi-icon {
        width: calc(var(--icon-size) + 16px);
        height: calc(var(--icon-size) + 16px);
    }
    
    .ssi-icon i {
        font-size: calc(var(--icon-size) * 0.9);
    }
}

@media screen and (max-width: 480px) {
    .ssi-container.mobile-hidden {
        display: none !important;
    }
    
    .ssi-icons-wrapper {
        border-radius: 10px 0 0 10px;
    }
    
    .ssi-icon {
        width: calc(var(--icon-size) + 12px);
        height: calc(var(--icon-size) + 12px);
    }
    
    .ssi-icon i {
        font-size: calc(var(--icon-size) * 0.8);
    }
}

/* Print styles - hide on print */
@media print {
    .ssi-container {
        display: none !important;
    }
}

/* Animation for initial load */
@keyframes ssiSlideIn {
    from {
        transform: translateX(100%) translateY(-50%);
        opacity: 0;
    }
    to {
        transform: translateX(0) translateY(-50%);
        opacity: 1;
    }
}

.ssi-container {
    animation: ssiSlideIn 0.5s ease-out;
}

/* RTL Support */
.rtl .ssi-container {
    right: auto;
    left: 0;
}

.rtl .ssi-icons-wrapper {
    border-radius: 0 8px 8px 0;
}

.rtl .ssi-icon:hover {
    padding-right: 0;
    padding-left: 5px;
}