/* ==========================================================================
   Billiotec - Account Notifications Stylesheet
   ========================================================================== */

:root {
    --theme-primary: #f0a70a;
    --theme-primary-hover: #d99507;
    --theme-dark: #111111;
    --theme-bg-light: #f8f9fa;
    --theme-border: #e9ecef;
}

.text-theme {
    color: var(--theme-primary) !important;
}

.bg-theme-light {
    background-color: rgba(240, 167, 10, 0.12);
}

.extra-small {
    font-size: 0.78rem;
}

/* Notification Items Styling */
.notification-item {
    transition: all 0.2s ease-in-out;
    border-color: var(--theme-border) !important;
}

.notification-item.unread {
    background-color: #fffdf5;
    border-left: 4px solid var(--theme-primary) !important;
}

.notification-item.read {
    background-color: #ffffff;
}

.notification-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Icons Frame */
.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.notification-item.unread .notification-icon {
    background-color: rgba(240, 167, 10, 0.15);
}

/* Delete Button */
.btn-delete-note {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    border: none;
    background: transparent;
    transition: all 0.2s ease;
}

.btn-delete-note:hover {
    background-color: #fee2e2;
    color: #dc3545;
}