/* 🎯 1. მთავარი კონტეინერი (ადგილი უცვლელია, ხტომა გაუქმებულია) */
.floating-social-wrapper {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 20px !important;        
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;          
    z-index: 999999 !important;
    
    background: rgba(0, 0, 0, 0.25) !important;       
    border: 1px solid rgba(255, 255, 255, 0.1) !important; 
    padding: 10px !important;                                  
    border-radius: 30px !important;                    
    backdrop-filter: blur(4px) !important;             
    pointer-events: auto !important;                    
}

/* დღის რეჟიმი */
:root:not(.dark-mode) .floating-social-wrapper {
    background: rgba(255, 255, 255, 0.4) !important;  
    border: 1px solid rgba(0, 0, 0, 0.1) !important;    
}

/* 🎯 2. ღილაკის ბაზა */
.fs-btn {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 45px !important;   
    height: 45px !important;  
    border-radius: 50% !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    
    /* აუცილებელია, რომ მბრუნავი "გველი" წრიდან არ გავიდეს */
    overflow: hidden !important; 
    
    /* ჩარჩო არ გვინდა, რადგან ანიმაცია ქმნის ჩარჩოს */
    border: none !important; 
    transition: transform 0.2s ease !important;
}

/* ✨ 3. მბრუნავი ანიმაცია ("გველის" ეფექტი) */
.fs-btn::before {
    content: '' !important;
    position: absolute !important;
    width: 150% !important;
    height: 150% !important;
    /* ეს ქმნის მბრუნავ ხაზს - შეგიძლია #ffffff შეცვალო სხვა ფერით თუ გინდა */
    background: conic-gradient(transparent, transparent, transparent, #ffffff) !important;
    animation: fsSpin 2.5s linear infinite !important;
    z-index: 0 !important;
}

/* დღის რეჟიმში "გველის" ფერი იქნება მუქი */
:root:not(.dark-mode) .fs-btn::before {
    background: conic-gradient(transparent, transparent, transparent, #1a1a1a) !important;
}

/* მესენჯერის ღილაკზე საპირისპირო მხარეს ვატრიალებთ, რომ უფრო ლამაზი იყოს */
.fs-btn--messenger::before {
    animation: fsSpinReverse 2.5s linear infinite !important;
}

/* 🎯 4. ღილაკის გული (ფარავს ცენტრს და ღიად ტოვებს მხოლოდ კიდეს) */
.fs-btn::after {
    content: '' !important;
    position: absolute !important;
    /* აქ რეგულირდება ხაზის სისქე (2px ნიშნავს 2 პიქსელიან ხაზს) */
    inset: 2px !important; 
    background: #111111 !important; /* ეს უნდა იყოს შენი საიტის მუქი ფონი */
    border-radius: 50% !important;
    z-index: 1 !important;
}

/* დღის რეჟიმში გული იქნება თეთრი */
:root:not(.dark-mode) .fs-btn::after {
    background: #ffffff !important;
}

/* 🎯 5. იკონები */
.fs-btn .fs-icon {
    position: relative !important;
    width: 22px !important;
    height: 22px !important;
    fill: #ffffff !important;
    z-index: 2 !important; /* აუცილებელია, რომ იკონა ანიმაციაზე წინ იყოს */
    transition: transform 0.3s ease !important;
}

:root:not(.dark-mode) .fs-btn .fs-icon {
    fill: #1a1a1a !important;
}

/* Hover ეფექტი (დაჭერისას ოდნავ იზრდება) */
.fs-btn:hover {
    transform: scale(1.08) !important;
}

/* 🔄 ანიმაციის Keyframes */
@keyframes fsSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fsSpinReverse {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

/* 📱 6. მობილურის ოპტიმიზაცია (ადგილი უცვლელი)
@media screen and (max-width: 768px) {
    .floating-social-wrapper {
        top: 50% !important;
        bottom: auto !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        right: 12px !important;
        
        flex-direction: column !important;
        padding: 8px !important;
        border-radius: 25px !important;
        gap: 10px !important;
    }

    .fs-btn {
        width: 42px !important;
        height: 42px !important;
    }

    .fs-btn .fs-icon {
        width: 20px !important;
        height: 20px !important;
    }
} */

/* 📱 6. მობილურის ოპტიმიზაცია (გვერდზე ფიქსირებული, 0% ხტომა) */
@media screen and (max-width: 768px) {
    .floating-social-wrapper {
        position: fixed !important;
        
        /* 💡 მაგია აქ არის: 50% იცვლება 50svh-ით (Small Viewport Height) */
        top: 50svh !important; 
        
        bottom: auto !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        
        /* მარჯვენა მხარეს დაფიქსირება (ეკრანის კიდესთან ოდნავ ახლოს) */
        right: 12px !important; 
        
        /* ვტოვებთ ვერტიკალურ (ზემოდან ქვემოთ) წყობას, როგორც დესკტოპზეა */
        flex-direction: column !important;
        padding: 8px !important;
        border-radius: 25px !important;
        gap: 10px !important;
    }

    /* მობილურზე ღილაკების ზომას ოდნავ ვამცირებთ, რომ ეკრანი არ გადატვირთოს */
    .fs-btn {
        width: 42px !important;
        height: 42px !important;
    }

    .fs-btn .fs-icon {
        width: 20px !important;
        height: 20px !important;
    }
}