.dp-btu-calculator {
  max-width: 850px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  color: var(--primary-color, #0f3f6a);
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.dp-btu-calculator h3 {
  margin-top: 0;
}
.dp-btu-calculator button {
  background-color: var(--accent-color, #f1c232);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 8px 14px;
  margin: 5px 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.dp-btu-calculator button:hover {
  /* Darken the accent colour on hover. CSS doesn't support the darken() function directly, so we hardcode a slightly darker shade. */
  background-color: #d4a622;
}
.dp-btu-calculator input[type="range"] {
  width: 100%;
}
.dp-btu-calculator input,
.dp-btu-calculator select {
  width: 100%;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 8px;
  font-size: 14px;
}
.dp-btu-calculator .room-container {
  background: #f7f9fc;
  padding: 12px;
  margin-bottom: 16px;
  border-radius: 6px;
  position: relative;
  border: 1px solid #ddd;
}
.dp-btu-calculator .remove-room {
  position: absolute;
  top: 4px;
  right: 8px;
  cursor: pointer;
  color: #a00;
  font-size: 18px;
}
.dp-btu-calculator .group {
  margin-bottom: 10px;
}
.dp-btu-calculator .group label {
  font-weight: bold;
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
}
.dp-btu-calculator details {
  margin-bottom: 8px;
}
.dp-btu-calculator summary {
  font-weight: bold;
  cursor: pointer;
  list-style: none;
}
.dp-btu-calculator summary::-webkit-details-marker {
  display: none;
}
.dp-btu-calculator .dp-results p {
  margin: 6px 0;
}
/* Simple utility classes */
.half {
  width: 48%;
  display: inline-block;
  box-sizing: border-box;
}