/* =========================================
   استایل زنگوله اعلان‌ها در هدر
   ========================================= */

.notification-bell-wrapper {
    position: relative !important;
    display: inline-block;
    list-style: none;
    margin: 0;
}

/* آیکون زنگوله */
.notification-bell-btn {
    color: #fff;
    position: relative;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: background 0.3s ease;
}

    .notification-bell-btn:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    .notification-bell-btn i {
        font-size: 22px;
    }

/* نشانگر تعداد اعلان (Badge) */
.notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #ef4444;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 50%;
    font-weight: bold;
    border: 2px solid #15161D;
    display: none; /* به صورت پیش‌فرض مخفی */
}

    .notification-badge.show {
        display: block;
    }

/* منوی بازشو (Dropdown) */
.notification-dropdown {
    display: none;
    position: absolute;
    top: 100%; /* دقیقاً زیر زنگوله */
    left: 50%;
    transform: translateX(-50%); /* وسط‌چین کردن نسبت به زنگوله */
    margin-top: 15px; /* فاصله از زنگوله */
    width: 320px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    z-index: 99999; /* مهم: برای اینکه روی همه چیز باشد */
    border: 1px solid #e2e8f0;
    direction: rtl;
    text-align: right;
}
/* هدر منوی بازشو */
.notification-dropdown-header {
    padding: 12px 15px;
    border-bottom: 1px solid #f1f5f9;
    font-weight: bold;
    color: #00456e;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-mark-read {
    font-size: 11px;
    color: #64748b;
    cursor: pointer;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 5px;
    transition: background 0.2s;
}

    .notification-mark-read:hover {
        background: #e2e8f0;
    }

/* لیست اعلان‌ها */
.notification-list {
    max-height: 350px;
    overflow-y: auto;
    /* ✅ گرد کردن گوشه‌های پایین لیست */
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background: #fff;
}
/* هر آیتم اعلان */
.notification-item {
    padding: 12px 15px;
    font-size: 12.5px;
    background: #fff;
    transition: background 0.3s;
    /* ✅ خط جداکننده بین آیتم‌ها */
    border-bottom: 1px solid #e2e8f0;
}
    .notification-item:last-child {
        border-bottom: none;
    }

    .notification-item.unread {
        background: #f0f9ff;
    }

.notification-item-title {
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 4px;
}

.notification-item-body {
    color: #475569;
    line-height: 1.6;
}

.notification-item-date {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 5px;
}

.notification-empty {
    padding: 20px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}

/* فوتر منوی بازشو */
.notification-dropdown-footer {
    padding: 10px;
    text-align: center;
    border-top: 1px solid #f1f5f9;
}

    .notification-dropdown-footer a {
        font-size: 12px;
        color: #0092e6;
        text-decoration: none;
        font-weight: bold;
    }

        .notification-dropdown-footer a:hover {
            text-decoration: underline;
        }
.notification-list {
    max-height: 350px;
    overflow-y: auto;
}
/* تنظیمات موبایل */
@media (max-width: 768px) {
    .notification-dropdown {
        position: fixed;
        top: 60px; /* زیر هدر */
        left: 10px;
        right: 10px;
        width: auto;
        transform: none;
    }
}

/* ✅ انیمیشن تکان خوردن زنگوله */
@keyframes ring-bell {
    0% {
        transform: rotate(0);
    }

    10% {
        transform: rotate(15deg);
    }

    20% {
        transform: rotate(-10deg);
    }

    30% {
        transform: rotate(8deg);
    }

    40% {
        transform: rotate(-6deg);
    }

    50% {
        transform: rotate(4deg);
    }

    60% {
        transform: rotate(-2deg);
    }

    70% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(0);
    }
}

.notification-bell-btn.has-unread i {
    animation: ring-bell 2s infinite; /* هر ۲ ثانیه یک بار تکان می‌خورد */
    transform-origin: top center; /* نقطه چرخش از بالای زنگوله باشد */
    display: inline-block; /* برای اعمال درست transform */
}
/* ✅ استایل بج "جدید" (قرمز، کوچک و کنار عنوان) */
.new-badge {
    background-color: #ef4444; /* رنگ قرمز */
    color: #fff;
    font-size: 9px; /* فونت کوچکتر */
    font-weight: bold;
    padding: 2px 6px; /* پدینگ کمتر برای کوچک شدن */
    border-radius: 8px; /* گوشه‌های گرد */
    margin-right: 8px; /* فاصله از عنوان */
    display: inline-block;
    vertical-align: middle; /* هم‌ترازی عمودی با متن */
    white-space: nowrap;
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
    animation: pulse-red 1.5s infinite; /* انیمیشن چشمک زدن */
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}
/* ✅ استایل دکمه بستن (ضربدر) */
.notification-close-btn {
    font-size: 22px;
    font-weight: bold;
    color: #94a3b8;
    cursor: pointer !important;
    line-height: 1;
    transition: color 0.3s, transform 0.3s;
}

    .notification-close-btn:hover {
        color: #ef4444; /* قرمز شدن هنگام هاور */
        transform: scale(1.1); /* کمی بزرگتر شدن */
    }
/* ✅ استایل فوتر و دکمه فعال‌سازی در منوی زنگوله */
.notification-dropdown-footer {
    padding: 12px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    text-align: center;
}

.bell-activate-btn {
    background: linear-gradient(135deg, #0092e6 0%, #00629b 100%);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: 0.3s;
}

    .bell-activate-btn:hover {
        filter: brightness(1.1);
        transform: translateY(-1px);
    }