/* Floating Contact Button - Using Tailwind-like approach with custom CSS where needed */
    .floating-contact-widget {
        position: fixed;
        z-index: 998; /* کمتر از منوی موبایل */
        transition: all 0.3s ease;
    }

    /* Position Classes */
    .floating-contact-widget.position-bottom-right {
        bottom: 20px;
        right: 20px;
    }

    .floating-contact-widget.position-bottom-left {
        bottom: 20px;
        left: 20px;
    }

    .floating-contact-widget.position-top-right {
        top: 20px;
        right: 20px;
    }

    .floating-contact-widget.position-top-left {
        top: 20px;
        left: 20px;
    }

    /* جلوگیری از تداخل با منوی پایین موبایل — مقدار دقیق در layout.css */

    /* Main Button */
    .floating-contact-btn {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        cursor: pointer;
        border: none;
        transition: all 0.3s ease;
        position: relative;
    }

    .floating-contact-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }

    .floating-contact-btn i {
        font-size: 24px;
        color: white;
        transition: all 0.3s ease;
    }

    .floating-contact-btn svg {
        width: 24px;
        height: 24px;
        color: white;
        transition: all 0.3s ease;
    }

    .floating-contact-btn.active i,
    .floating-contact-btn.active svg {
        transform: rotate(45deg);
    }

    /* Social Menu */
    .floating-social-menu {
        position: absolute;
        display: flex;
        flex-direction: column;
        gap: 12px;
        opacity: 0;
        visibility: hidden;
        transform: scale(0);
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    /* Menu Position - Bottom Right/Left */
    .position-bottom-right .floating-social-menu,
    .position-bottom-left .floating-social-menu {
        bottom: 70px;
    }

    .position-bottom-right .floating-social-menu {
        right: 0;
    }

    .position-bottom-left .floating-social-menu {
        left: 0;
    }

    /* Menu Position - Top Right/Left */
    .position-top-right .floating-social-menu,
    .position-top-left .floating-social-menu {
        top: 70px;
    }

    .position-top-right .floating-social-menu {
        right: 0;
    }

    .position-top-left .floating-social-menu {
        left: 0;
    }

    .floating-social-menu.active {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }

    /* Social Item */
    .floating-social-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 15px;
        border-radius: 50px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        text-decoration: none;
        transition: all 0.3s ease;
        white-space: nowrap;
        transform: translateY(10px);
        opacity: 0;
    }

    /* Dark mode support */
    .floating-social-item {
        background: white;
    }

    @media (prefers-color-scheme: dark) {
        .floating-social-item {
            background: rgb(31, 36, 44);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }
    }

    .dark .floating-social-item {
        background: rgb(31, 36, 44);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .floating-social-menu.active .floating-social-item {
        transform: translateY(0);
        opacity: 1;
    }

    /* Staggered animation for items */
    .floating-social-menu.active .floating-social-item:nth-child(1) {
        transition-delay: 0.05s;
    }
    .floating-social-menu.active .floating-social-item:nth-child(2) {
        transition-delay: 0.1s;
    }
    .floating-social-menu.active .floating-social-item:nth-child(3) {
        transition-delay: 0.15s;
    }
    .floating-social-menu.active .floating-social-item:nth-child(4) {
        transition-delay: 0.2s;
    }
    .floating-social-menu.active .floating-social-item:nth-child(5) {
        transition-delay: 0.25s;
    }
    .floating-social-menu.active .floating-social-item:nth-child(6) {
        transition-delay: 0.3s;
    }

    .floating-social-item:hover {
        transform: translateX(-5px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .position-bottom-left .floating-social-item:hover,
    .position-top-left .floating-social-item:hover {
        transform: translateX(5px);
    }

    .floating-social-item img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: contain;
    }

    .floating-social-item svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .floating-social-item span {
        font-size: 14px;
        font-weight: 500;
        color: #333;
    }

    .dark .floating-social-item span {
        color: #e5e7eb;
    }

    /* Phone Item with special styling */
    .floating-social-item.phone-item {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .floating-social-item.phone-item span {
        color: white;
    }

    .floating-social-item.phone-item svg {
        color: white;
    }

    /* Backdrop */
    .floating-contact-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        z-index: 997;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .floating-contact-backdrop.active {
        display: block;
        opacity: 1;
    }

    /* Responsive */
    @media (max-width: 576px) {
        .floating-contact-btn {
            width: 50px;
            height: 50px;
        }

        .floating-contact-btn i,
        .floating-contact-btn svg {
            font-size: 20px;
            width: 20px;
            height: 20px;
        }

        .floating-social-item {
            padding: 8px 12px;
        }

        .floating-social-item img {
            width: 28px;
            height: 28px;
        }

        .floating-social-item span {
            font-size: 13px;
        }
    }