/* Association Payments — the Payments card.
   Unlayered (an @layer would lose to the theme's unlayered styles) and scoped
   .ac-plugin .ap-* like core's components.css. Colors/spacing from --ac-* tokens
   only, so it inherits whatever Harbor preset the site runs. */

.ac-plugin .ap-payments form { margin: 0; }

.ac-plugin .ap-rows { margin-top: 1.1rem; }

.ac-plugin .ap-row { padding: 1.15rem 0; border-top: 1px solid var(--ac-line); }
.ac-plugin .ap-row:first-child { border-top: 0; padding-top: 0; }
.ac-plugin .ap-row:last-child { padding-bottom: 0; }

/* Lead: icon · name/amount · status badge (pushed to the right) */
.ac-plugin .ap-row__lead { display: flex; align-items: center; gap: .85rem; }

.ac-plugin .ap-row__icon {
	flex: none;
	width: 42px; height: 42px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px;
	background: var(--ac-accent-soft);
	color: var(--ac-primary);
}

.ac-plugin .ap-row__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ac-plugin .ap-row__name { font-weight: 600; color: var(--ac-ink); line-height: 1.25; }
.ac-plugin .ap-row__sub { font-size: .95rem; color: var(--ac-muted); }

.ac-plugin .ap-row__badge { margin-left: auto; flex: none; }

/* Foot: autopay status + action buttons */
.ac-plugin .ap-row__foot {
	display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
	margin-top: .85rem;
	padding-left: calc(42px + .85rem); /* align under the text, past the icon */
}
@media (max-width: 480px) {
	.ac-plugin .ap-row__foot { padding-left: 0; }
}

/* Plain-language due line under the amount (Due <date> / Paid through <date> /
   Autopay on · next charge <date>). */
.ac-plugin .ap-row__due { font-size: .88rem; color: var(--ac-muted); }

/* Neutral slate chip for a charge that's owed but not due for a while — distinct
   from the amber "Due", green "Paid", and red "Overdue". */
.ac-plugin .ac-badge--upcoming { background: color-mix(in srgb, var(--ac-primary) 9%, transparent); color: var(--ac-primary); }

.ac-plugin .ap-notice { margin-bottom: 1.1rem; }
.ac-plugin .ap-notice--good { background: var(--ac-good-soft); color: var(--ac-good); border-color: color-mix(in srgb, var(--ac-good) 30%, transparent); }
.ac-plugin .ap-notice--error { background: var(--ac-crit-soft); color: var(--ac-crit); border-color: color-mix(in srgb, var(--ac-crit) 30%, transparent); }