.budi-properties-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.budi-properties-group { margin-bottom: 16px; }
.budi-properties-group:last-child { margin-bottom: 0; }

.budi-properties-group__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-black);
  padding-left: 8px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.budi-properties-group__items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.budi-property-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  background-color: #fff;
}
.budi-property-item:nth-child(odd) { background-color: var(--secondary); }

.budi-property-item__label {
  font-size: 14px;
  line-height: 1.5;
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.budi-property-item__emoji {
  font-size: 14px;
  line-height: 1;
}

/* Lucide property icon. Rendered as a CSS mask so the SVG's stroke acts as
   the alpha channel and we can tint every icon with the Budi primary pink
   (or any other CSS color) without preprocessing the SVGs themselves. The
   `--budi-property-icon` custom property carries the per-row icon URL set
   inline by the Razor template. Width/height match the emoji baseline so
   icon and emoji rows line up identically. */
.budi-property-item__icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-color: var(--primary);
  -webkit-mask: var(--budi-property-icon) center / contain no-repeat;
  mask: var(--budi-property-icon) center / contain no-repeat;
}

.budi-property-item__value {
  font-size: 14px;
  line-height: 1.5;
  text-align: right;
  max-width: 60%;
  word-wrap: break-word;
}

.budi-property-item__unit {
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  padding-left: 4px;
}

/* Reserved info-icon column at the end of each row.
   Only rendered when at least one item in the list has an explanation,
   so plain lists keep their existing two-column layout untouched.
   Empty cells still take up the column width to keep values aligned. */
.budi-property-item__info-cell {
  width: 20px;
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 6px;
}

.budi-property-item__info {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  line-height: 0;
}

.budi-property-item__info .budi-svg-icon {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

.budi-property-item__info:hover .budi-svg-icon {
  opacity: 1;
}

/* Bootstrap's default tooltip is too narrow to comfortably show a small
   key/value table, so the property-list component opts in via
   data-bs-custom-class="budi-property-tooltip-bs" when the tooltip body
   carries one of the primitive-aware HTML breakdowns produced by
   AuctionObjectPropertyExplanationBuilder. */
.budi-property-tooltip-bs.tooltip {
  --bs-tooltip-max-width: 240px;
}

.budi-property-tooltip-bs .tooltip-inner {
  text-align: left;
  padding: 8px 10px;
}

/* The actual content lives inside a <dl class="budi-property-tooltip">
   that the builder emits — render label/value pairs as a tight 2-column
   grid so e.g. "Bredd: 205 mm", "Profil: 55 %" stack cleanly without us
   having to compute column widths per entry. */
.budi-property-tooltip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.budi-property-tooltip dt {
  font-weight: 600;
  white-space: nowrap;
  text-align: left;
}

.budi-property-tooltip dd {
  margin: 0;
  text-align: left;
}