/* نسخه ۲.۵ - با افکت توجه */
#mmb-container {
    position: fixed !important;
    bottom: 20px !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
}

#mmb-container.mmb-pos-right { right: 18px !important; left: auto !important; }
#mmb-container.mmb-pos-left  { left: 18px !important; right: auto !important; }

.mmb-toggle {
    width: var(--mmb-size, 120px) !important;
    height: auto !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    border-radius: 20px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.28) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    outline: none !important;
    overflow: visible !important;
    line-height: 0 !important;
    display: block !important;
}

.mmb-toggle:hover {
    transform: scale(1.07) !important;
    box-shadow: 0 8px 26px rgba(0,0,0,0.35) !important;
    animation: none !important; /* هنگام هاور افکت متوقف شود */
}

.mmb-custom-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    border-radius: 18px !important;
}

/* ========== افکت‌های توجه ========== */

/* تکان خوردن هر ۵ ثانیه */
.mmb-anim-shake {
    animation: mmb-shake 5s ease-in-out infinite !important;
}

@keyframes mmb-shake {
    0%, 82%, 100% { transform: translateX(0); }
    84% { transform: translateX(-6px) rotate(-3deg); }
    86% { transform: translateX(6px) rotate(3deg); }
    88% { transform: translateX(-5px) rotate(-2deg); }
    90% { transform: translateX(5px) rotate(2deg); }
    92% { transform: translateX(-3px) rotate(-1deg); }
    94% { transform: translateX(3px) rotate(1deg); }
    96% { transform: translateX(0); }
}

/* پالس نرم (ضربان) */
.mmb-anim-pulse {
    animation: mmb-pulse 2.5s ease-in-out infinite !important;
}

@keyframes mmb-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 6px 20px rgba(0,0,0,0.28); }
    50% { transform: scale(1.08); box-shadow: 0 8px 28px rgba(30,136,229,0.4); }
}

/* پریدن ملایم */
.mmb-anim-bounce {
    animation: mmb-bounce 3s ease-in-out infinite !important;
}

@keyframes mmb-bounce {
    0%, 70%, 100% { transform: translateY(0); }
    75% { transform: translateY(-12px); }
    80% { transform: translateY(0); }
    85% { transform: translateY(-6px); }
    90% { transform: translateY(0); }
}

/* منوی آیتم‌ها */
.mmb-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.9);
    transition: all 0.28s ease !important;
    pointer-events: none;
}

.mmb-menu.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

.mmb-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #fff !important;
    color: #1f2937 !important;
    text-decoration: none !important;
    padding: 8px 14px 8px 8px !important;
    border-radius: 50px !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15) !important;
    min-width: 135px !important;
    direction: rtl !important;
    transition: transform 0.2s ease !important;
}

.mmb-item:hover {
    transform: translateX(-5px) !important;
}

#mmb-container.mmb-pos-left .mmb-item:hover {
    transform: translateX(5px) !important;
}

.mmb-item-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: var(--item-color) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.mmb-item-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

@media (max-width: 768px) {
    #mmb-container { bottom: 14px !important; }
    #mmb-container.mmb-pos-right { right: 12px !important; }
    #mmb-container.mmb-pos-left  { left: 12px !important; }
    .mmb-toggle { width: calc(var(--mmb-size, 120px) * 0.9) !important; }
}