/* Floating Social Buttons - Hub Design */

/* Container */
.floating-social-container {
    position: fixed;
    right: 20px;
    bottom: 100px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    overflow: visible;
    max-height: calc(100vh - 160px);
}

/* All Buttons Base Style */
.floating-social-btn,
.floating-social-toggle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    cursor: pointer;
    border: none;
    position: relative;
    flex-shrink: 0;
}

/* Individual Button Colors */
.phone-btn {
    background: var(--primary-color);
}

.email-btn {
    background: var(--secondary-color);
}

.whatsapp-btn {
    background: #25D366;
}

/* Social Hub Wrapper */
.social-hub {
    position: relative;
    display: flex;
    align-items: center;
}

/* Hub Trigger Button */
.social-hub-btn {
    background: linear-gradient(135deg, #6C63FF, #5a52e0);
    z-index: 2;
}

.social-hub-btn i {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-hub.active .social-hub-btn i {
    transform: rotate(180deg);
}

/* Hub Items Container */
.social-hub-items {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
    padding-right: 8px;
}

/* Hub Sub-buttons */
.social-hub-item {
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Staggered reveal */
.social-hub.active .social-hub-item {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.social-hub.active .social-hub-item:nth-child(1) {
    transition-delay: 0ms;
}

.social-hub.active .social-hub-item:nth-child(2) {
    transition-delay: 50ms;
}

.social-hub.active .social-hub-item:nth-child(3) {
    transition-delay: 100ms;
}

/* Collapse stagger (reverse order) */
.social-hub:not(.active) .social-hub-item:nth-child(3) {
    transition-delay: 0ms;
}

.social-hub:not(.active) .social-hub-item:nth-child(2) {
    transition-delay: 50ms;
}

.social-hub:not(.active) .social-hub-item:nth-child(1) {
    transition-delay: 100ms;
}

/* Sub-button Brand Colors */
.fb-btn {
    background: #1877F2;
}

.ig-btn {
    background: #E4405F;
}

.li-btn {
    background: #0A66C2;
}

/* Toggle button (hidden on desktop) */
.floating-social-toggle {
    display: none;
    background: var(--secondary-color);
    position: relative;
}

/* Icons */
.floating-social-btn i,
.floating-social-toggle i {
    font-size: 20px;
}

/* Toggle button icons */
.floating-social-toggle .fa-times {
    display: none;
}

.floating-social-container.active .floating-social-toggle .fa-share-nodes {
    display: none;
}

.floating-social-container.active .floating-social-toggle .fa-times {
    display: block;
}

/* Hover Effects - Desktop Only */
@media (hover: hover) {
    .floating-social-btn:hover {
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    /* Prevent hub items from translateY on hover (they fan horizontally) */
    .social-hub-item:hover {
        transform: scale(1.1) !important;
    }

    .phone-btn:hover {
        background: #1a2636;
    }

    .email-btn:hover {
        background: #ff6654;
    }

    .whatsapp-btn:hover {
        background: #1ebe5a;
    }

    .social-hub-btn:hover {
        background: linear-gradient(135deg, #7b73ff, #6C63FF);
    }

    .fb-btn:hover {
        background: #1565c0;
    }

    .ig-btn:hover {
        background: #d62e4a;
    }

    .li-btn:hover {
        background: #084e96;
    }
}

/* Tooltips - Desktop Only */
@media (min-width: 769px) {
    /* Contact button tooltips (right side buttons) */
    .floating-social-container > .floating-social-btn[data-tooltip]::before,
    .social-hub-btn[data-tooltip]::before {
        content: attr(data-tooltip);
        position: absolute;
        right: 70px;
        top: 50%;
        transform: translateY(-50%) translateX(6px);
        background: #0F1626;
        color: white;
        padding: 4px 10px;
        border-radius: 4px;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.01em;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease, transform 0.22s ease;
    }

    .floating-social-container > .floating-social-btn:hover[data-tooltip]::before,
    .social-hub-btn:hover[data-tooltip]::before {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }

    /* Hub sub-button tooltips (above the buttons) */
    .social-hub-item[data-tooltip]::before {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(4px);
        margin-bottom: 8px;
        background: #0F1626;
        color: white;
        padding: 4px 10px;
        border-radius: 4px;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.01em;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease, transform 0.22s ease;
    }

    .social-hub-item:hover[data-tooltip]::before {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    .floating-social-container {
        right: 16px;
        bottom: 16px;
    }

    /* Show toggle button */
    .floating-social-toggle {
        display: flex;
    }

    /* Hide contact buttons + social hub by default on mobile */
    .floating-social-container > .floating-social-btn,
    .social-hub {
        display: none;
    }

    /* Show buttons when container is active */
    .floating-social-container.active > .floating-social-btn,
    .floating-social-container.active .social-hub {
        display: flex;
        animation: slideIn 0.3s ease forwards;
    }

    /* Stagger animation for mobile reveal */
    .floating-social-container.active > .floating-social-btn:nth-child(1) {
        animation-delay: 0.05s;
    }

    .floating-social-container.active > .floating-social-btn:nth-child(2) {
        animation-delay: 0.1s;
    }

    .floating-social-container.active > .floating-social-btn:nth-child(3) {
        animation-delay: 0.15s;
    }

    .floating-social-container.active .social-hub {
        animation-delay: 0.2s;
    }

    /* On mobile, hub items fan upward instead of left */
    .social-hub-items {
        position: absolute;
        right: 0;
        bottom: 100%;
        top: auto;
        transform: none;
        flex-direction: column-reverse;
        padding-right: 0;
        padding-bottom: 8px;
    }

    .social-hub-item {
        transform: translateY(20px);
    }

    .social-hub.active .social-hub-item {
        transform: translateY(0);
    }

    /* Slightly larger touch targets on mobile */
    .floating-social-btn,
    .floating-social-toggle {
        width: 50px;
        height: 50px;
    }

    .floating-social-btn i,
    .floating-social-toggle i {
        font-size: 20px;
    }
}

/* Animation for mobile */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Very small screens */
@media (max-width: 360px) {
    .floating-social-container {
        right: 10px;
        bottom: 10px;
        gap: 8px;
    }

    .floating-social-btn,
    .floating-social-toggle {
        width: 45px;
        height: 45px;
    }

    .floating-social-btn i,
    .floating-social-toggle i {
        font-size: 18px;
    }
}

/* Accessibility - Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .floating-social-btn,
    .floating-social-toggle,
    .social-hub-item,
    .social-hub-btn i {
        transition: none !important;
    }

    .social-hub-item {
        transition-delay: 0ms !important;
    }

    @keyframes slideIn {
        from, to {
            opacity: 1;
            transform: none;
        }
    }
}