/* --- ۱. کانتینر والد برای موقعیت‌یابی دکمه و نوار --- */
.sticky-container {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 9999;
    width: 40px; 
    
    /* فعال کردن Flexbox برای وسط‌چین کردن فلش در حالت بسته */
    display: flex;
    flex-direction: column;
}

/* *** حالت بسته: فلش در وسط عمودی قرار می‌گیرد *** */
.sticky-container:not(.is-open) {
    justify-content: center; /* فلش را به وسط عمودی می‌آورد */
    align-items: center;    /* فلش را به وسط افقی می‌آورد */
    height: 40px;           /* *** مهم‌ترین تغییر: محدود کردن ارتفاع به اندازه دکمه *** */
    overflow: hidden;
}

/* --- ۲. نوار آیکون‌های اصلی (که جابجا می‌شود) --- */
.sticky-sidebar {
    width: 100%; 
    position: relative;
    transform: translateX(0); 
    transition: transform 0.3s ease-in-out; 
    border-radius: 0; 
}

/* حالت بسته: نوار آیکون‌ها به بیرون از صفحه می‌رود */
.sticky-container:not(.is-open) .sticky-sidebar {
    transform: translateX(calc(100%)); 
}


/* --- ۳. دکمه کنترل (فلش مشکی) --- */
.sticky-toggle-btn.top-toggle {
    /* حالت باز: موقعیت بالا و راست (از -40px برای بیرون از محفظه استفاده می‌شود) */
    position: absolute;
    top: -40px; 
    right: 0; 
    
    width: 40px;
    height: 40px;
    background-color: #000 !important; 
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    
    border-radius: 8px 0 0 0; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
    z-index: 10001; 
    
    transition: all 0.3s ease-in-out;
}

/* *** حالت بسته: لغو موقعیت مطلق و وسط‌چین کردن *** */
.sticky-container:not(.is-open) .sticky-toggle-btn.top-toggle {
    position: static !important; /* *** تغییر مهم: لغو کامل Absolute Positioning *** */
    margin: 0; 
    border-radius: 8px 0 0 8px; /* گوشه‌های چپ گرد می‌شوند */
}


/* *** ۴. چرخش فلش (برای کاراکتر جدید →) *** */

/* چرخش فلش در حالت بسته: باید به چپ اشاره کند */
.sticky-container:not(.is-open) .top-toggle .arrow-icon {
    transform: rotate(180deg); /* فلش → می‌چرخد و به چپ (←) اشاره می‌کند */
    transition: transform 0.3s;
}

/* چرخش فلش در حالت باز (is-open): باید به راست اشاره کند (برای بستن) */
.top-toggle .arrow-icon {
    transform: rotate(0deg); /* فلش → در جهت عادی باقی می‌ماند و به راست (→) اشاره می‌کند */
    transition: transform 0.3s;
}


/* --- ۵. کانتینر و آیکون‌های اجتماعی (بدون تغییر) --- */
.social-icons-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%; 
    position: relative;
}

/* ... بقیه استایل‌ها (icon-content, hover-text, social-icon-box, و رنگ‌ها) بدون تغییر ... */

.social-icon-box {
    display: block;
    width: 40px; 
    height: 40px;
    position: relative;
    text-decoration: none;
    overflow: visible; 
}

/* محتوای داخلی: شامل آیکون و متن هاور */
.social-icon-box .icon-content {
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 40px; 
    height: 100%;
    color: #fff;
    
    position: absolute;
    top: 0;
    right: 0;
    
    transition: all 0.3s ease-out; 
    box-sizing: border-box;
}

/* استایل جدید برای آیکون SVG/WebP */
.social-icon-box .social-icon-svg {
    width: 20px; 
    height: 20px;
    filter: brightness(0) invert(1); 
    flex-shrink: 0;
}

/* --- افکت هاور: بیرون آمدن باکس از سمت چپ --- */
.social-icon-box:hover .icon-content {
    width: 150px; 
    
    justify-content: space-between; 
    padding-left: 15px; 
    padding-right: 10px;
    
    border-radius: 8px 0 0 8px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 10; 
}

/* تنظیم متن هاور */
.social-icon-box .hover-text {
    opacity: 0; 
    width: 0; 
    transition: opacity 0.3s ease-out;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    line-height: 40px; 
}

.social-icon-box:hover .hover-text {
    opacity: 1; 
    width: auto; 
    transition-delay: 0.1s; 
}


/* --- ۶. رنگ‌بندی و گوشه‌های گرد نهایی --- */

/* گرد کردن گوشه پایین برای آخرین آیکون (واتس‌اپ) - انتقال به چپ */
.social-icons-wrapper .social-icon-box:last-child .icon-content {
    border-bottom-left-radius: 8px; 
    border-bottom-right-radius: 0; 
}

/* رنگ‌بندی پس زمینه icon-content */
.facebook-box .icon-content { background-color: #3b5998 !important; }
.instagram-box .icon-content { 
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important; 
}
.youtube-box .icon-content { background-color: #ff0000 !important; }
.linkedin-box .icon-content { background-color: #0077b5 !important; }
.tiktok-box .icon-content { background-color: #000000 !important; } 
.whatsapp-box .icon-content { background-color: #25d366 !important; }


/* پنهان سازی در موبایل */
@media (max-width: 767px) {
    .sticky-container {
        display: none !important; 
    }
}