/* ── NOTIFICHE — aggiungere in fondo a assets/css/style.css ── */

/* Wrapper campanella */
.notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Pulsante campanella */
.notif-btn {
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    padding: 4px;
    display: flex;
    align-items: center;
    color: #444;
    transition: color .2s;
}
.notif-btn:hover { color: #ff6b4a; }
.notif-btn svg { width: 22px; height: 22px; }

/* Badge numero */
.notif-badge {
    position: absolute;
    top: -2px; right: -4px;
    background: #ff4757;
    color: #fff;
    border-radius: 50%;
    min-width: 18px; height: 18px;
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    animation: badgePop .3s cubic-bezier(.36,.07,.19,.97);
}
@keyframes badgePop {
    0%   { transform: scale(0); }
    70%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Dropdown */
.notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.16);
    z-index: 500;
    overflow: hidden;
    animation: dropIn .2s ease;
}
@keyframes dropIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 700;
    font-size: 14px;
}
.notif-header button {
    background: none;
    border: none;
    color: #ff6b4a;
    font-size: 12px;
    cursor: pointer;
    font-weight: 600;
}

.notif-list {
    max-height: 360px;
    overflow-y: auto;
}

.notif-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    text-decoration: none;
    color: #222;
    border-bottom: 1px solid #f8f8f8;
    position: relative;
    transition: background .15s;
}
.notif-item:hover { background: #f9f9f9; }
.notif-item.unread { background: #fff8f5; }

.notif-icona { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.notif-body  { flex: 1; min-width: 0; }
.notif-titolo {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-corpo {
    font-size: 12px;
    color: #777;
    margin: 0 0 4px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.notif-tempo { font-size: 11px; color: #bbb; margin: 0; }
.notif-dot {
    width: 8px; height: 8px;
    background: #ff6b4a;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}

.notif-empty {
    padding: 32px 16px;
    text-align: center;
    color: #bbb;
    font-size: 14px;
}

/* ── TOAST NOTIFICA ── */
.notif-toast {
    position: fixed;
    top: 70px;
    right: 20px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 320px;
    z-index: 600;
    border-left: 4px solid #ff6b4a;
    transform: translateX(calc(100% + 30px));
    opacity: 0;
    transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .35s ease;
}
.notif-toast.show {
    transform: translateX(0);
    opacity: 1;
}
.notif-toast-icon { font-size: 26px; flex-shrink: 0; }
.notif-toast strong { display: block; font-size: 14px; color: #222; margin-bottom: 2px; }
.notif-toast p { font-size: 12px; color: #888; margin: 0; }
.notif-toast-close {
    background: none;
    border: none;
    color: #bbb;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    margin-left: auto;
    flex-shrink: 0;
}

@media (max-width: 500px) {
    .notif-dropdown { width: calc(100vw - 32px); right: -8px; }
    .notif-toast    { right: 12px; left: 12px; max-width: none; }
}