/* HouseAccount design system — component classes (part 1: buttons, tags, price,
 * service card). Recipes from docs/design-system/SOURCE.md §2. All values consume
 * tokens via var(--ha-*); part 2 lives in houseaccount_components_forms.css. */

/* ————— Button ————— */
.ha-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ha-space-2);
  border-radius: var(--ha-radius-pill); border: 0;
  font-family: inherit; font-size: var(--ha-fs-body); line-height: var(--ha-lh-body);
  font-weight: var(--ha-weight-book); padding: 10px var(--ha-space-6);
  background-color: var(--ha-blue-primary); color: #fff; cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ha-btn:hover { background-image: linear-gradient(rgba(20,60,85,0.04), rgba(20,60,85,0.04)); }
.ha-btn:focus-visible { outline: 2px solid var(--ha-blue-accent); outline-offset: 4px; }
.ha-btn:disabled, .ha-btn[disabled] {
  background-color: var(--ha-border); background-image: none; cursor: default;
}
.ha-btn--small { padding: 2px 14px; }

.ha-btn--secondary {
  background-color: #fff; color: var(--ha-blue-primary);
  border: 2px solid var(--ha-blue-primary); padding: var(--ha-space-2) 22px;
}
.ha-btn--secondary:hover {
  background-image: linear-gradient(rgba(20,60,85,0.04), rgba(20,60,85,0.04));
}
.ha-btn--secondary.ha-btn--small { padding: 0 var(--ha-space-3); }
.ha-btn--secondary:disabled, .ha-btn--secondary[disabled] {
  background-color: #fff; background-image: none;
  color: var(--ha-ink-muted); border-color: var(--ha-border);
}

/* ————— Tag / chip ————— */
.ha-tag {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--ha-space-3);
  border-radius: var(--ha-radius-pill); font-size: var(--ha-fs-small);
  font-weight: var(--ha-weight-medium); white-space: nowrap;
}
.ha-tag--gold  { background-color: var(--ha-gold-light);        color: var(--ha-blue-primary); }
.ha-tag--blue  { background-color: rgba(45,133,255,.10);        color: var(--ha-blue-text); }
.ha-tag--green { background-color: rgba(13,150,152,.14);        color: var(--ha-success); }
.ha-tag--red   { background-color: var(--ha-danger-bg);         color: var(--ha-danger); }
.ha-tag--gray  { background-color: var(--ha-border-strong);     color: var(--ha-ink-muted); }
.ha-tag--solid { background-color: var(--ha-blue-primary);      color: #fff; }

/* ————— Price ————— */
.ha-price { display: flex; flex-direction: column; gap: var(--ha-space-1); }
.ha-price__row { display: flex; align-items: flex-end; gap: var(--ha-space-2); }
.ha-price__amount {
  font-weight: var(--ha-weight-bold); font-size: 40px; line-height: 48px; color: var(--ha-ink);
}
.ha-price--has-reg .ha-price__amount { color: var(--ha-blue-text); }
.ha-price__reg {
  color: var(--ha-ink-muted); font-size: var(--ha-fs-h3); line-height: var(--ha-lh-h3);
  text-decoration: line-through;
}
.ha-price--small .ha-price__amount { font-size: var(--ha-fs-h3); line-height: var(--ha-lh-h3); }
.ha-price--small .ha-price__reg {
  font-size: var(--ha-fs-body-lg); line-height: var(--ha-lh-body-lg);
}
.ha-price__needs-info {
  font-size: var(--ha-fs-body); line-height: 24px;
  font-weight: var(--ha-weight-bold); color: var(--ha-blue-text);
}

/* ————— Service card ————— */
.ha-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--ha-border); border-radius: var(--ha-radius-md);
  box-shadow: var(--ha-shadow-card); overflow: hidden;
}
.ha-card__cover {
  display: block; width: 100%; height: 180px;
  object-fit: cover; object-position: center;
}
.ha-card__body {
  display: flex; flex-direction: column; gap: var(--ha-space-4); padding: var(--ha-space-6);
}
.ha-card__title {
  font-size: var(--ha-fs-h3); line-height: var(--ha-lh-h3);
  font-weight: var(--ha-weight-bold); color: var(--ha-ink);
}
.ha-card__desc {
  font-size: var(--ha-fs-body); line-height: 24px; color: var(--ha-ink-muted);
}