.bf-badge {
    background: var(--bf-badge-color, red);
    color: #fff;
    padding: 4px 10px;
    font-size: 13px;
    margin-left: 5px;
    border-radius: 20px;
    font-weight: bold;
    display: inline-block;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.3s;
}

/* تحريك البادج */
.bf-badge-bounce { animation: bounce 1s infinite; }
.bf-badge-pulse { animation: pulse 1s infinite; }
.bf-badge-shake { animation: shake 0.5s infinite; }
.bf-badge-jello { animation: jello 1s infinite; }

.bf-badge:hover { transform: scale(1.1); }

@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes jello { 0% { transform: scale3d(1,1,1); } 30% { transform: scale3d(1.25,0.75,1); } 40% { transform: scale3d(0.75,1.25,1); } 50% { transform: scale3d(1.15,0.85,1); } 65% { transform: scale3d(.95,1.05,1); } 75% { transform: scale3d(1.05,.95,1); } 100% { transform: scale3d(1,1,1); } }

#bf-popup {
    position: fixed;
    top:0; left:0; right:0; bottom:0;
    background: rgba(0,0,0,0.7);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
    direction: rtl;
    opacity: 0;
    animation: fadeIn 0.5s forwards;
}

.bf-popup-content {
    background: var(--bf-popup-bg-color, #fff);
    color: var(--bf-popup-text-color, #000);
    padding:30px;
    text-align:center;
    border-radius:15px;
    max-width:450px;
    width:90%;
    box-shadow:0 10px 25px rgba(0,0,0,0.3);
    animation: slideUp 0.5s ease;
    font-family: inherit;
}

.bf-popup-title {
    font-size:24px;
    font-weight:bold;
    color: var(--bf-popup-title-color, #000);
    margin-bottom:15px;
}

.bf-popup-text {
    font-size:16px;
    margin-bottom:15px;
}

#bf-close {
    margin-top:15px;
    padding:8px 15px;
    background:#e74c3c;
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-weight:bold;
    transition: all 0.3s ease;
}
#bf-close:hover { background:#c0392b; }

@keyframes fadeIn { to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(50px); } to { transform: translateY(0); } }

@media(max-width:480px){
    .bf-popup-content { padding:20px; font-size:14px; }
    .bf-badge { font-size:11px; padding:3px 8px; }
    .bf-popup-title { font-size:20px; }
}