.payments-search, .payments-filters, .payments-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin: 18px 0;
}
.payments-search label { flex: 1 1 320px; }
.payments-filters[hidden] { display: none; }
#portal-payments label { display: grid; gap: 6px; }
#portal-payments input:not([type="checkbox"]), #portal-payments select {
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid #d0d9d1;
  border-radius: 6px;
  background: #fff;
  color: #18382b;
  max-width: 100%;
}
.payments-tabs [aria-pressed="true"] { background: #e4efe6; border-color: #396e42; }
.payments-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.payments-widgets article { border: 1px solid #dce6de; border-radius: 10px; padding: 18px; background: #f6faf6; }
.payments-widgets span, .payments-widgets strong { display: block; }
.payments-widgets strong { margin-top: 10px; font-size: 1.6rem; }
.payments-record { margin: 14px 0; padding: 14px; border: 1px solid #dce6de; border-radius: 8px; }
.payments-record > summary { cursor: pointer; line-height: 1.8; }
#portal-payments small { display: block; color: #526258; }
#portal-payments pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 600px; }
.payments-error { color: #a21c24; font-weight: 600; }
#portal-payments [data-payments-message]:empty { display: none; }
@media (max-width: 700px) {
  .payments-search, .payments-filters { align-items: stretch; flex-direction: column; }
  .payments-search label { flex-basis: auto; }
  .payments-record { padding: 10px; }
}