/* =====================================
   Notification Center — owned styles
   ===================================== */

.notification-center-screen {
    width: min(900px, 100%);
    direction: rtl;
    margin: 0 auto;
    padding: 24px 20px 40px;
}

.notification-center-screen,
.notification-center-screen * { box-sizing: border-box; }
.notification-center-header { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.notification-center-header h1 { flex: 1; margin: 0; font-size: 22px; }
.notification-center-header button { border: 0; border-radius: 10px; padding: 8px 10px; font-family: inherit; cursor: pointer; }

.notification-item {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    padding: 14px;
    text-align: right;
    direction: rtl;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    background: white;
    cursor: pointer;
}
.notification-item.notification-unread { border-width: 2px; }
.notification-item-icon { font-size: 24px; }
.notification-item-content { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.notification-item-content span { line-height: 1.7; }
.notification-item-content small { opacity: .6; }
.notification-dot { width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: #d32f2f; }
.notification-empty { padding: 40px 20px; text-align: center; opacity: .7; }

.tahouri-toast-container,
.tahouri-toast-container * { box-sizing: border-box; }
.tahouri-toast-container {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 18px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.tahouri-toast { max-width: min(520px, 100%); padding: 11px 16px; border-radius: 12px; background: rgba(30, 30, 30, .94); color: white; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); opacity: 1; transform: translateY(0); transition: opacity .25s ease, transform .25s ease; }
.tahouri-toast.is-hiding { opacity: 0; transform: translateY(8px); }

@media (prefers-reduced-motion: reduce) { .tahouri-toast { transition: none; } }