.alert-box {
  display: flex;
  grid-template-columns: 20px 1fr auto;
  align-items: flex-start;
  gap: .6rem;
  padding: .8rem 1rem;
  border-radius: .5rem;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  font-size: .95rem;
  margin: .5rem 0;
  margin: 15px;
}
.alert-box .alert-text { flex:1 1 auto; }
.alert-box .alert-close {
  appearance: none; border: 0; background: transparent;
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  padding: 0 .25rem; opacity: .7;
}
.alert-box .alert-close:hover { opacity: 1; }
.alert-box .alert-icon {
  width: 20px;
  height: 17px;
  flex: 0 0 20px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 16px 16px; /* pas aan indien nodig */
}

.alert-time { font-weight: 700; white-space: nowrap; }

.alert-box.success .alert-icon { background-image: url('../images/success.png'); background-size: 16px 16px;}
.alert-box.error   .alert-icon { background-image: url('../images/error.png'); background-size: 16px 16px;}
.alert-box.warning .alert-icon { background-image: url('../images/warning.png');background-size: 16px 16px; }
.alert-box.notice  .alert-icon { background-image: url('../images/notice.png'); background-size: 16px 16px;}
.alert-box.success { background:#ecfdf5; border-color:#10b98133; color:#065f46; }
.alert-box.error   { background:#fef2f2; border-color:#ef444433; color:#7f1d1d; }
.alert-box.warning { background:#fffbeb; border-color:#f59e0b33; color:#92400e; }
.alert-box.notice  { background:#eff6ff; border-color:#3b82f633; color:#1e3a8a; }

.alert-time { font-weight:700; white-space:nowrap; }
.alert-box span { display:block; }

/* Streak Notification Styling */
.streak-notification {
	margin-bottom: 15px;
}

.streak-notification-content {
	padding: 0;
}

.streak-notification-content .streak-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-weight: 600;
	color: #1f2937;
}

.streak-notification-content .streak-icon {
	font-size: 1.2rem;
}

.streak-notification-content .streak-title {
	font-size: 0.95rem;
	color: #374151;
}

.streak-notification-content .streak-info {
	margin-bottom: 6px;
	font-size: 0.9rem;
	color: #4b5563;
}

.streak-notification-content .streak-message {
	margin-bottom: 8px;
	font-size: 0.85rem;
	color: #6b7280;
	line-height: 1.4;
}

.streak-notification-content .streak-rewards {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid #e5e7eb;
	font-size: 0.85rem;
	color: #4b5563;
}

.streak-notification-content .reward-label {
	font-weight: 600;
	color: #374151;
}

.streak-notification-content .reward-geld {
	color: #059669;
	font-weight: 600;
}

.streak-notification-content .reward-xp {
	color: #2563eb;
	font-weight: 600;
}

.streak-notification-content .reward-credits {
	color: #7c3aed;
	font-weight: 600;
}

/* Streak type specific colors */
.streak-notification-content.streak-milestone .streak-header {
	color: #7c3aed;
}

.streak-notification-content.streak-milestone .streak-title {
	color: #7c3aed;
}

.streak-notification-content.streak-reset .streak-header {
	color: #d97706;
}

.streak-notification-content.streak-reset .streak-title {
	color: #d97706;
}

.streak-notification-content.streak-streak .streak-header {
	color: #059669;
}

.streak-notification-content.streak-streak .streak-title {
	color: #059669;
}