/* Reset & Base */
* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: system-ui, -apple-system, sans-serif; background:#f9f9fb; color:#1a1a1a; line-height:1.5; }
.container { max-width: 600px; margin: 2rem auto; padding: 1.5rem; background:#fff; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.05); }

/* Typography */
h1 { font-size:1.75rem; margin-bottom:0.5rem; }
.subtitle { color:#555; margin-bottom:1.5rem; }
label { display:block; margin-bottom:0.35rem; font-weight:600; }
.req { color:#d32f2f; }

/* Form */
.field + .field { margin-top:1rem; }
select, input[type=number] {
  width:100%; padding:0.75rem; font-size:1rem; border:1px solid #ccc; border-radius:8px;
  transition:border 0.2s;
}
select:focus, input:focus { outline:none; border-color:#1976d2; }

/* Output */
.output { margin-top:2rem; padding:1rem; background:#e3f2fd; border-radius:8px; min-height:120px; }
.placeholder { color:#666; font-style:italic; }
.cost-breakdown { margin:1rem 0; }

/* Cost Item - Fixed Layout */
.cost-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
  gap: 8px;
}

/* Label + Tooltip Wrapper */
.cost-label-with-tooltip {
  display: flex;
  align-items: center;
  flex: 1;
}

.cost-label {
  flex: 1;
}

.cost-value {
  white-space: nowrap;
  font-weight: 600;
}

/* Tooltip Trigger */
.tooltip-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  background: #1976d2;
  color: white;
  font-weight: bold;
  font-size: 11px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

/* Tooltip Content */
.tooltip-content {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #1a1a1a;
  color: white;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.5;
  max-width: 340px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.tooltip-content::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 16px;
  border: 6px solid transparent;
  border-bottom-color: #1a1a1a;
}

.tooltip-title {
  margin: 0 0 0.5rem 0;
  font-weight: 600;
  font-size: 0.9rem;
}

.tooltip-list {
  margin: 0;
  padding-left: 1.2rem;
  list-style: none;
}

.tooltip-list li {
  position: relative;
  padding-left: 0.4rem;
  margin-bottom: 0.25rem;
}

.tooltip-list li::before {
  content: "•";
  position: absolute;
  left: -0.9rem;
  color: #aaa;
}

/* SHOW TOOLTIP */
.cost-item:hover .tooltip-content,
.tooltip-content.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Mobile tap */
@media (pointer: coarse) {
  .tooltip-trigger:active ~ .tooltip-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Disclaimer */
.disclaimer { margin-top:2rem; font-size:0.875rem; color:#555; border-top:1px solid #eee; padding-top:1rem; }

/* Responsive */
@media (max-width: 480px) {
  .container { margin:1rem; padding:1rem; }
}