/* Wattle & Co: the pieces only this template needs (the call-back form and the fee tables). */
.err-list { padding: 12px 16px; border-radius: var(--r-s); background: color-mix(in srgb, var(--alert) 9%, var(--card)); color: var(--alert); font: 700 16px/1.5 var(--body); }
.err-list ul { display: grid; gap: 4px; margin-top: 6px; padding-left: 18px; list-style: disc; }
.err-list a { color: inherit; }
.form-card .field input, .form-card .field select, .form-card .field textarea { width: 100%; }
.form-card .field-set { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.form-card .field-set legend { margin-bottom: 8px; font-weight: 700; font-size: 17px; }
.form-card .seg { border-radius: var(--r-m); }
.ok-msg { padding: 14px 16px; border-radius: var(--r-m); background: var(--sun-soft); color: var(--ink); font-size: 17px; box-shadow: inset 4px 0 0 var(--leaf); }
.table-wrap { overflow-x: auto; border-radius: var(--r-m); box-shadow: 0 0 0 1px var(--line); background: var(--card); }
.fee-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.fee-table th, .fee-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.fee-table thead th { font: 600 13.5px/1.3 var(--mono); text-transform: uppercase; color: var(--muted); }
.fee-table tbody th { font: 600 18px/1.3 var(--display); }
.fee-table td { font: 500 17px/1.4 var(--mono); }
.fee-table tbody tr:last-child > * { border-bottom: 0; }