/* floating-widget.css - فلوتینگ ویجت رامین */

/* مخفی در دسکتاپ */
@media (min-width: 769px) {
    .floating-widget-ramin {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .floating-widget-ramin {
        position: relative;
        z-index: 9997;
    }

    /* ========== دایره اصلی قرمز ========== */
    .floating-btn-container {
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 9998;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* دایره اصلی قرمز */
    .floating-btn-ramin {
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 10px 35px rgba(220, 53, 69, 0.5), 0 0 0 4px rgba(255,255,255,0.95);
        transition: all 0.3s ease;
        border: 3px solid white;
        position: relative;
    }

    .floating-btn-ramin:hover {
        transform: scale(1.12);
        box-shadow: 0 12px 40px rgba(220, 53, 69, 0.7), 0 0 0 4px rgba(255,255,255,1);
    }

    /* پالس قوی */
    .pulse-ring-ramin {
        position: absolute;
        width: 95px;
        height: 95px;
        border: 3px solid rgba(220, 53, 69, 0.8);
        border-radius: 50%;
        animation: pulse-ramin 1.5s infinite;
        opacity: 0;
    }

    .pulse-ring-ramin.delay-1 {
        animation-delay: 0.75s;
    }

    @keyframes pulse-ramin {
        0% { transform: scale(0.7); opacity: 0.9; }
        70% { transform: scale(1.3); opacity: 0; }
        100% { transform: scale(0.7); opacity: 0; }
    }

    /* آیکون تلفن - بزرگ و مرکز دایره */
    .operator-icon-ramin {
        position: absolute;
        width: 50px !important;
        height: 50px !important;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
        transition: all 0.3s ease;
        z-index: 1;
    }

    /* آیکون ضربدر - کمی کوچکتر از تلفن */
    .close-icon-ramin {
        position: absolute;
        width: 42px !important;
        height: 42px !important;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: none;
        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
        transition: all 0.3s ease;
        z-index: 1;
    }

    /* متن "تماس سریع" روی آیکون */
    .main-btn-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 12px;
        font-weight: 1000;
        font-family: Tahoma, Arial, sans-serif;
        text-align: center;
        text-shadow: 
            2px 2px 0 #000,
            -2px 2px 0 #000,
            2px -2px 0 #000,
            -2px -2px 0 #000,
            0 2px 0 #000,
            0 -2px 0 #000,
            2px 0 0 #000,
            -2px 0 0 #000;
        z-index: 2;
        white-space: nowrap;
        letter-spacing: -0.2px;
        padding: 2px 3px;
        line-height: 1;
        width: 85%;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.3s ease;
    }

    /* در حالت باز، متن "تماس سریع" مخفی شود */
    .floating-btn-ramin.open .main-btn-text {
        opacity: 0;
        visibility: hidden;
    }

    /* ========== ستون عمودی راست (۳ دایره بالای ❌) ========== */
    .circle-vertical-ramin {
        position: fixed;
        z-index: 9997;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        opacity: 0;
        visibility: hidden;
        display: flex;
        flex-direction: column;
        gap: 22px;
        bottom: 130px;
        right: 30px;
        transform: translateY(20px);
    }

    /* ========== ردیف افقی پایین (۳ دایره چپ ❌) ========== */
    .circle-horizontal-ramin {
        position: fixed;
        z-index: 9997;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        opacity: 0;
        visibility: hidden;
        display: flex;
        flex-direction: row;
        gap: 22px;
        bottom: 30px;
        right: 130px;
        transform: translateX(20px);
    }

    /* ========== دایره‌های سفید (همه ۶ دایره) ========== */
    .circle-item-ramin {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-decoration: none;
        color: #333;
        width: 80px;
        height: 80px;
        background: white;
        border-radius: 50%;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.15);
        border: 3px solid #f8f9fa;
        transition: all 0.3s ease;
        position: relative;
        padding-top: 12px;
        padding-bottom: 8px;
    }

    .circle-item-ramin:hover {
        transform: translateY(-5px) scale(1.1);
        box-shadow: 0 15px 35px rgba(0,0,0,0.3), 0 6px 15px rgba(0,0,0,0.2);
        background: #ffffff;
        border-color: #e9ecef;
    }

    /* آیکون‌های داخل دایره */
    .circle-item-ramin svg {
        width: 38px !important;
        height: 38px !important;
        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
        transition: all 0.2s ease;
        margin-bottom: 8px;
    }

    .circle-item-ramin:hover svg {
        transform: scale(1.15);
        filter: drop-shadow(0 6px 8px rgba(0,0,0,0.4));
    }

    /* متن داخل دایره */
    .circle-item-text {
        font-size: 12px;
        font-weight: 900;
        color: #111;
        font-family: Tahoma, Arial, sans-serif;
        text-align: center;
        line-height: 1.2;
        max-width: 75px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: absolute;
        bottom: 8px;
        left: 0;
        right: 0;
        margin: 0 auto;
        letter-spacing: -0.2px;
        text-shadow: 
            1px 1px 0 #fff,
            -1px 1px 0 #fff,
            1px -1px 0 #fff,
            -1px -1px 0 #fff;
        z-index: 2;
        pointer-events: none;
        background: none;
    }

    /* متن دوخطی */
    .circle-item-ramin:nth-child(2) .circle-item-text,
    .circle-item-ramin:nth-child(3) .circle-item-text {
        font-size: 11px;
        line-height: 1.2;
        white-space: normal;
        display: flex;
        flex-direction: column;
        align-items: center;
        bottom: 6px;
        gap: 1px;
        max-width: 70px;
    }

    /* حالت باز */
    .circle-horizontal-ramin.open-ramin,
    .circle-vertical-ramin.open-ramin {
        opacity: 1;
        visibility: visible;
        transform: translate(0, 0);
    }

    /* ========== موبایل کوچک ========== */
    @media (max-width: 480px) {
        .floating-btn-container {
            bottom: 25px;
            right: 25px;
        }
        
        .floating-btn-ramin {
            width: 75px;
            height: 75px;
        }
        
        .pulse-ring-ramin {
            width: 90px;
            height: 90px;
        }
        
        .operator-icon-ramin {
            width: 46px !important;
            height: 46px !important;
        }
        
        .close-icon-ramin {
            width: 38px !important;
            height: 38px !important;
        }
        
        .main-btn-text {
            font-size: 11px;
            width: 88%;
        }
        
        .circle-vertical-ramin {
            bottom: 120px;
            right: 25px;
            gap: 18px;
        }
        
        .circle-horizontal-ramin {
            bottom: 25px;
            right: 120px;
            gap: 18px;
        }
        
        .circle-item-ramin {
            width: 75px;
            height: 75px;
            padding-top: 11px;
        }
        
        .circle-item-ramin svg {
            width: 36px !important;
            height: 36px !important;
            margin-bottom: 7px;
        }
        
        .circle-item-text {
            font-size: 11px;
            bottom: 7px;
        }
        
        .circle-item-ramin:nth-child(2) .circle-item-text,
        .circle-item-ramin:nth-child(3) .circle-item-text {
            font-size: 10px;
            bottom: 5px;
        }
    }

    /* ========== صفحه‌های بسیار کوچک ========== */
    @media (max-width: 360px) {
        .floating-btn-container {
            bottom: 20px;
            right: 20px;
        }
        
        .floating-btn-ramin {
            width: 70px;
            height: 70px;
        }
        
        .operator-icon-ramin {
            width: 42px !important;
            height: 42px !important;
        }
        
        .close-icon-ramin {
            width: 34px !important;
            height: 34px !important;
        }
        
        .main-btn-text {
            font-size: 10px;
            width: 90%;
        }
        
        .circle-vertical-ramin {
            bottom: 110px;
            right: 20px;
            gap: 15px;
        }
        
        .circle-horizontal-ramin {
            bottom: 20px;
            right: 110px;
            gap: 15px;
        }
        
        .circle-item-ramin {
            width: 70px;
            height: 70px;
            padding-top: 10px;
        }
        
        .circle-item-ramin svg {
            width: 34px !important;
            height: 34px !important;
            margin-bottom: 6px;
        }
        
        .circle-item-text {
            font-size: 10px;
            bottom: 6px;
        }
        
        .circle-item-ramin:nth-child(2) .circle-item-text,
        .circle-item-ramin:nth-child(3) .circle-item-text {
            font-size: 9px;
            bottom: 4px;
        }
    }
}