/* Info Boxes */

.info-box {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: #f0f7ff;
  border-left: 4px solid #0066cc;
  padding: 1rem 1.5rem;
  margin: 1.5em 0;
}

.info-box > i {
  font-size: 18px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: #0066cc;
}

.info-content {
  font-size: 0.9em;
}

.info-content > *:first-child {
  margin-top: 0;
}

.info-content > *:last-child {
  margin-bottom: 0;
}

/* Info box types */
.info-box.info-info {
  background: #f0f7ff;
  border-color: #0066cc;
}
.info-box.info-info > i { color: #0066cc; }

.info-box.info-scientific {
  background: #f5f3ff;
  border-color: #7c3aed;
}
.info-box.info-scientific > i { color: #7c3aed; }

.info-box.info-technical {
  background: #f8fafc;
  border-color: #64748b;
}
.info-box.info-technical > i { color: #64748b; }

.info-box.info-explanation {
  background: #eff6ff;
  border-color: #3b82f6;
}
.info-box.info-explanation > i { color: #3b82f6; }

.info-box.info-learning {
  background: #ecfdf5;
  border-color: #10b981;
}
.info-box.info-learning > i { color: #10b981; }

.info-box.info-warning {
  background: #fffbeb;
  border-color: #f59e0b;
}
.info-box.info-warning > i { color: #f59e0b; }

.info-box.info-example {
  background: #f0fdfa;
  border-color: #14b8a6;
}
.info-box.info-example > i { color: #14b8a6; }


.info-box.info-todo {
  background: #f1f1f1;
  border-color: #ff0000;
}
.info-box.info-todo > i { color: #14b8a6; }