/* Base callout styles */
.callout {
  border-left: 4px solid;
  border-radius: 4px;
  padding: 1rem;
  margin: 1.5rem 0;
}

.callout-title {
  font-weight: 700;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

.callout-content {
  margin: 0;
}

.callout-content p:last-child {
  margin-bottom: 0;
}

/* TIP - Blue */
.callout-tip {
  background-color: #e7f3ff;
  border-color: #2196F3;
}

.callout-tip .callout-title {
  color: #1976D2;
}

/* WARNING - Orange/Yellow */
.callout-warning {
  background-color: #fff4e5;
  border-color: #ff9800;
}

.callout-warning .callout-title {
  color: #f57c00;
}

/* NOTE - Gray */
.callout-note {
  background-color: #f5f5f5;
  border-color: #757575;
}

.callout-note .callout-title {
  color: #424242;
}

/* INFO - Teal/Cyan */
.callout-info {
  background-color: #e0f7fa;
  border-color: #00bcd4;
}

.callout-info .callout-title {
  color: #0097a7;
}

/* DANGER/ERROR - Red (bonus) */
.callout-danger {
  background-color: #ffebee;
  border-color: #f44336;
}

.callout-danger .callout-title {
  color: #c62828;
}

/* SUCCESS - Green (bonus) */
.callout-success {
  background-color: #e8f5e9;
  border-color: #4caf50;
}

.callout-success .callout-title {
  color: #2e7d32;
}