/* HouseAccount design system — component classes (part 2: info card, text field,
 * option button, stepper). Recipes from docs/design-system/SOURCE.md §2. Values
 * consume tokens via var(--ha-*). */

/* ————— Info card ————— */
.ha-infocard {
  display: flex; gap: 14px; align-items: flex-start;
  border-radius: var(--ha-radius-lg); padding: var(--ha-space-5);
  background: var(--ha-gradient-blue-deep);
}
.ha-infocard__dot {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--ha-radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ha-blue-accent); color: #fff;
}
.ha-infocard__title {
  font-size: var(--ha-fs-body-lg); font-weight: var(--ha-weight-bold); color: #fff;
}
.ha-infocard__desc {
  font-size: 15px; line-height: 22px; color: var(--ha-border);
}
.ha-infocard--gold { background: var(--ha-gold-light); }
.ha-infocard--gold .ha-infocard__dot { background: var(--ha-gold-base); color: var(--ha-ink); }
.ha-infocard--gold .ha-infocard__title { color: var(--ha-ink); }
.ha-infocard--gold .ha-infocard__desc { color: var(--ha-ink-muted); }

/* ————— Text field ————— */
.ha-field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.ha-field__label {
  font-size: var(--ha-fs-body-lg); line-height: var(--ha-lh-body-lg); color: var(--ha-ink);
}
.ha-field__required { color: var(--ha-blue-accent); }
.ha-field__subtext {
  font-size: var(--ha-fs-small); line-height: var(--ha-lh-small); color: var(--ha-ink-muted);
}
.ha-field__input {
  height: 48px; border-radius: var(--ha-radius-md); border: 1px solid var(--ha-border);
  background: #fff; padding: 10px var(--ha-space-4); font-family: inherit;
  font-size: var(--ha-fs-body-lg); color: var(--ha-ink);
}
.ha-field__input:focus {
  outline: none; border-color: var(--ha-blue-accent);
  box-shadow: 0 0 0 2px rgba(45,133,255,.25);
}
.ha-field__helper {
  font-size: var(--ha-fs-small); line-height: var(--ha-lh-small); color: var(--ha-ink-muted);
}

/* ————— Option button ————— */
.ha-option {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  height: 48px; padding: 0 var(--ha-space-5); border-radius: var(--ha-radius-md);
  border: 2px solid var(--ha-border); background: #fff; color: var(--ha-ink);
  font-family: inherit; font-size: var(--ha-fs-body); cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.ha-option:hover { background: rgba(20,60,85,.04); border-color: var(--ha-blue-accent); }
.ha-option:focus-visible { outline: 2px solid var(--ha-blue-accent); outline-offset: 4px; }
.ha-option--selected {
  background: var(--ha-blue-text); border-color: var(--ha-blue-text); color: #fff;
}
.ha-option--selected:hover { background: var(--ha-blue-text); border-color: var(--ha-blue-text); }

/* ————— Stepper ————— */
.ha-stepper { display: inline-flex; height: 48px; }
.ha-stepper__btn, .ha-stepper__value {
  display: inline-flex; align-items: center; justify-content: center; height: 48px;
  border: 1px solid var(--ha-border); background: #fff; color: var(--ha-ink);
  font-family: inherit; font-size: var(--ha-fs-body-lg);
}
.ha-stepper__btn { width: 48px; cursor: pointer; }
.ha-stepper__btn:first-child { border-radius: 8px 0 0 8px; }
.ha-stepper__btn:last-child { border-radius: 0 8px 8px 0; border-left: 0; }
.ha-stepper__value { width: 64px; border-left: 0; border-right: 0; }
.ha-stepper__btn:disabled, .ha-stepper__btn[disabled] {
  color: var(--ha-border); cursor: default;
}