/* Payments: cost breakdown, tracking steps, checks tiles, approval chain */
.pm-cost { width: 100%; border-collapse: collapse; font-size: 14px }
.pm-cost td { padding: 8px 0; border-bottom: 1px solid var(--line); vertical-align: top }
.pm-cost td.num { text-align: right; white-space: nowrap; padding-left: 12px }
.pm-cost td .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px }
.pm-cost tr.tot td { border-bottom: 2px solid var(--line2, var(--line)); font-size: 15px }
.pm-cost tr:last-child td { border-bottom: 0 }
.pm-track { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0; counter-reset: s }
.pm-track li { position: relative; padding: 26px 8px 0 0; font-size: 13px }
.pm-track li::before { content: ''; position: absolute; top: 8px; left: 0; right: 0; height: 3px; background: var(--line) }
.pm-track li.done::before { background: var(--ok, #12a079) }
.pm-track li .dot { position: absolute; top: 2px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--card); border: 3px solid var(--line) }
.pm-track li.done .dot { border-color: var(--ok, #12a079); background: var(--ok, #12a079) }
.pm-track li.stop .dot, .pm-track.bad li.stop::before { border-color: var(--badFg, #d6334b); background: var(--badFg, #d6334b) }
.pm-track li b { display: block }
.pm-track li small { display: block; color: var(--muted); font-size: 12px }
.pm-checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px }
.pm-checks > div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px }
.pm-checks > div i { font-size: 18px }
.pm-checks > div small { color: var(--muted); font-size: 12px }
.pm-checks .ok i { color: var(--ok, #12a079) } .pm-checks .warn i { color: #d99a06 } .pm-checks .bad i { color: var(--badFg, #d6334b) }
.pm-chain { list-style: none; margin: 0 0 10px; padding: 0 }
.pm-chain li { padding: 6px 0 6px 22px; position: relative; font-size: 14px }
.pm-chain li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line) }
.pm-chain li.done::before { background: var(--ok, #12a079); border-color: var(--ok, #12a079) }
.pm-chain li.bad::before { background: var(--badFg, #d6334b); border-color: var(--badFg, #d6334b) }
.pm-chain li small { display: block; color: var(--muted); font-size: 12px }
.pm-howto { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.55 } .pm-howto li { margin-bottom: 6px }
tr.pm-badline td { background: var(--badBg, #fdecef) }
fieldset[data-new-ben] { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 12px }
fieldset[data-new-ben] legend { font-weight: 600; padding: 0 6px }
@media (max-width: 720px) { .pm-checks { grid-template-columns: repeat(2, minmax(0, 1fr)) } .pm-track { grid-template-columns: repeat(3, 1fr); row-gap: 10px } }