#myNotificationsModal.slide-right .modal-dialog { transform: translate(100%, 0); transition: transform 0.3s ease-out; }
#myNotificationsModal.slide-right.show .modal-dialog { transform: translate(0, 0); }
:root {
    --primary-accent: #00A39C; --primary-danger: #ef4444;
    --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-400: #9ca3af;
    --gray-500: #6b7280; --gray-700: #374151;
}
.notifications-container { padding-bottom: 10px; }
.notification-tabs { display: flex; background: white; border-bottom: 1px solid var(--gray-200); position: sticky; top: 0; z-index: 10; }
.notification-tabs .tab {
    flex: 1; padding: 14px 5px; background: none; border: none;
    border-bottom: 3px solid transparent; font-size: 15px; font-weight: 600;
    color: var(--gray-400); cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 6px;
}
.notification-tabs .tab.active { color: var(--primary-accent); border-bottom: 3px solid var(--primary-accent); }
.notification-tabs .badge { background: var(--primary-danger); color: white; padding: 2px 8px; border-radius: 10px;  }
/* .notification-item { display: flex; padding: 15px 20px; border-bottom: 1px solid var(--gray-100); background: white; transition: background-color 0.2s; cursor: pointer; } */
/* 確保父容器背景是紅色，這是滑開後會露出的顏色 */
/* 移除原本的 .swiped 相關位移，回歸單純佈局 */
.notification-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 16px !important; /* 恢復內距 */
    border-bottom: 1px solid #eee;
    background-color: white;
    transition: background-color 0.2s;
}

.notification-item.unread {
    background-color: #f0fdfa;
    border-left: 5px solid var(--primary-accent);
}

/* 內容區塊：讓出右側空間給按鈕 */
.notification-main-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    background: transparent !important;
    padding: 0 !important;
    cursor: pointer;
}

/* 刪除按鈕：放在右側 */
.notification-delete-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af; /* 預設灰色，不搶眼 */
    transition: color 0.2s, background-color 0.2s;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 10px;
}

.notification-delete-btn:hover {
    color: #dc3545; /* 滑鼠移入變紅色 */
    background-color: #fee2e2;
}

.notification-item.unread { background: #f0fdfa; border-left: 5px solid var(--primary-accent); }

.notification-icon { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: white; margin-right: 15px; }
.type-promo { background-color: #f59e0b; }
.type-personal { background-color: #8b5cf6; }
.type-system { background-color: #6b7280; }
.notification-content { flex-grow: 1; }
.store-name { font-size: 12px; font-weight: 600; color: var(--primary-accent); margin-bottom: 2px; text-transform: uppercase; }
.notification-title { font-weight: 700; font-size: 16px; color: var(--gray-700); margin-bottom: 2px; }
.notification-body { font-size: 14px; color: #4b5563; line-height: 1.4; }
.notification-time { font-size: 12px; color: var(--gray-400); margin-top: 5px; }

.empty-notifications {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}

.empty-notifications .icon {
    font-size: 6em;
    margin-bottom: 15px;
    opacity: 0.5;
}