/* CSS */
.alert-box{
  --bg: #fff8e6;
  --border: #ffd89a;
  --accent: #c47a00;
  --text: #333;
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:18px;
  border-radius:10px;
  border:5px solid var(--border);
  background:linear-gradient(180deg, var(--bg), #fffdfa);
  box-shadow: 0 6px 18px rgba(30,30,30,0.06);
  max-width:900px;
  margin:12px auto;
  position:relative;
  animation: alert-pop .18s ease;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  color:var(--text);
}

/* icon */
.alert-icon{
  min-width:44px;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  border-radius:8px;
  background:rgba(0,0,0,0.03);
  padding:6px;
  margin-top:4px;
}

/* body */
.alert-body{ flex:1; }
.alert-title{
  margin:0 0 6px 0;
  font-size:18px;
  letter-spacing:0.4px;
  color:var(--accent);
}
.alert-text{
  margin:0;
  line-height:1.55;
  font-size:14px;
  color: #222;
}

/* close button */
.alert-close{
  position:absolute;
  right:10px;
  top:10px;
  border:0;
  background:transparent;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  color:rgba(0,0,0,0.45);
  padding:6px;
  border-radius:6px;
}
.alert-close:hover{ background: rgba(0,0,0,0.04); color:#000; }

/* variants */
/* Warning (default) */
.alert-warning{
  --bg: #fff7ee;
  --border: #ffd7a8;
  --accent: #b85b00;
}

/* Notice (blue) */
.alert-notice{
  --bg: #f0f7ff;
  --border: #cde4ff;
  --accent: #1f6feb;
}

/* Success (green) */
.alert-success{
  --bg: #f2fbf5;
  --border: #c6f0d1;
  --accent: #0b7a3f;
}

/* responsive */
@media (max-width:540px){
  .alert-box{ padding:14px; gap:12px; border-radius:8px; }
  .alert-icon{ min-width:38px; min-height:38px; font-size:18px; }
  .alert-title{ font-size:16px; }
  .alert-text{ font-size:13px; }
}

/* simple pop animation */
@keyframes alert-pop{
  from{ transform: translateY(-6px); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}