/* ================= NOTIFICATIONS ================= */

.header-dropdown {
    width: 240px;
}

/* Item individual */
.header-dropdown .dropdown-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    line-height: 1.2;
    transition: background 0.2s ease;
    position: relative;
}

/* Texto padrão (base) */
.header-dropdown .dropdown-item strong {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-white);
}

.header-dropdown .dropdown-item small {
    font-size: 0.65rem;
    opacity: 0.6;
    color: var(--text-white);
}

/* Hover */
.header-dropdown .dropdown-item:hover {
    background: rgba(var(--gold-rgb), 0.08);
}

/* ================= CORES LIDA / NÃO LIDA ================= */

/* NÃO LIDA */
.header-dropdown .dropdown-item.notif-nao-lida strong,
.header-dropdown .dropdown-item.notif-nao-lida small {
    color: var(--gold-strong) !important;
    opacity: 1 !important;
    font-weight: 700;
}

/* LIDA */
.header-dropdown .dropdown-item.notif-lida strong,
.header-dropdown .dropdown-item.notif-lida small {
    color: var(--gold-light) !important;
    opacity: 0.7 !important;
    font-weight: 500;
}

/* ================= BADGE ================= */

.notif-wrapper {
    position: relative;
    display: inline-block;
}

.notif-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--danger);
    color: var(--white);
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(var(--danger-rgb), 0.6);
    animation: badgePulse 1.8s infinite;
}

@keyframes badgePulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--danger-rgb), 0.6); }
    70%  { box-shadow: 0 0 0 6px rgba(var(--danger-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--danger-rgb), 0); }
}

/* Linha divisória dourada */

.header-dropdown .dropdown-item:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 10px;
    right: 10px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--gold),
        transparent
    );
    opacity: 0.4;
}

/* Data pequena */

.header-dropdown .dropdown-item .notif-date {
    position: absolute;
    top: 10px;
    right: 8px;
    font-size: 0.75rem!important;
    opacity: 0.5;
    color: var(--gold);
}