/* ============================================
   FLOATING TELEGRAM BUTTON
   Nested borders approach - all clickable
   ============================================ */

.floating-btn {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 39;

    /* Remove link styles */
    text-decoration: none;
    cursor: pointer;

    /* Animation */
    animation: floating-pulse 2s ease-in-out infinite;

    /* Transition for hover */
    transition: transform 0.3s ease;
}

/* Outer border (accent) */
.floating-btn__outer {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--color-accent);
    border-radius: 50%;
    transition: box-shadow 0.3s ease;
}

/* Middle border (dark) */
.floating-btn__middle {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--color-dark-2);
    border-radius: 50%;
}

/* Inner border (white) */
.floating-btn__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--color-white);
    border-radius: 50%;
}

/* Icon styling */
.floating-btn img {
    display: block;
    /*width: 66px;*/
    /*height: 66px;*/
    border-radius: 50%;
}

/* Pulse animation */
@keyframes floating-pulse {
    0%, 100% {
        transform: translateY(-50%) scale(1);
    }
    50% {
        transform: translateY(-50%) scale(1.1);
    }
}

/* Hover effect */
.floating-btn:hover {
    animation-play-state: paused;
    transform: translateY(-50%) scale(1.15);
}

.floating-btn:hover .floating-btn__outer {
    box-shadow: 0 0 26px 8px var(--color-accent);
}

/* Mobile */
@media (max-width: 768px) {
    .floating-btn {
        right: 18px;
    }
}