.pay-demo{margin:22px 0 0;padding:12px 16px;background:#fff2dd;color:#704707;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}.pay-demo button{color:#704707;white-space:nowrap}.pay-summary{display:flex;gap:40px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:24px}.pay-summary span{display:block;color:#53637b;font-size:13px;margin-bottom:7px}.pay-summary strong{font-size:25px;font-weight:650;font-variant-numeric:tabular-nums}.pay-summary .late{color:#b52e3b}.pay-toolbar{display:flex;align-items:end;gap:18px;margin-bottom:12px}.pay-toolbar label{max-width:220px}.pay-search{margin-left:auto}.pay-tabs{display:flex;gap:4px;align-self:center;background:#e9eef5;padding:4px;border-radius:8px}.pay-tabs button{padding:10px 14px;border-radius:6px;background:transparent;color:#43516a}.pay-tabs button[aria-pressed=true]{background:white;color:#17243c;box-shadow:0 2px 5px #15274812}.pay-note{font-size:13px;color:#52627a}.pay-table{overflow:auto;background:white;border:1px solid var(--line);border-radius:12px}.pay-table table{border-collapse:collapse;width:100%;min-width:1000px;font-variant-numeric:tabular-nums}.pay-table th{background:#f0f4f9;font-size:13px;text-align:left;color:#52627a;padding:16px}.pay-table td{border-top:1px solid #e8edf3;padding:8px;vertical-align:middle}.pay-table td:first-child{padding:18px 16px;min-width:190px}.pay-table td:first-child small{display:block;font-size:12px;color:#53637b}.pay-table td:last-child{padding:16px;font-weight:650}.pay-cell{display:flex;flex-direction:column;align-items:start;width:100%;min-width:138px;gap:6px;padding:12px;background:#f7f9fc;border-radius:7px;color:#24334b;text-align:left;line-height:1.4}.pay-cell:hover{outline:1px solid #8e9cb0}.pay-cell small{font-size:11px;color:inherit}.pay-cell b{font-size:13px}.pay-cell.paid{background:#edf7f2;color:#1b654c}.pay-cell.late{background:#fceef0;color:#a52d3a}.pay-cell.deferred{background:#fff4df;color:#805410}.pay-cell.future{background:#f2f5f9;color:#53637b}.pay-cell.pay-selected{outline:2px solid #d67b00}.pay-editor{margin-top:24px;padding:24px;background:white;border:1px solid var(--line);border-radius:12px;scroll-margin:20px}.pay-editor h2{margin-bottom:8px}.pay-editor p{color:#52627a}.pay-editor-top{display:flex;justify-content:space-between;gap:12px}.pay-editor form{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin:18px 0}.pay-editor label{min-width:160px}.pay-editor h3{margin-top:24px;font-size:15px}.pay-editor ul{padding-left:20px;line-height:2;color:#43516a}.pay-editor .pay-error{color:#b52e3b}.mobile-back{display:none}#pay-message{color:#8b3038}.pay-table button:focus-visible{outline:3px solid #c87700;outline-offset:2px}::selection{background:#ffe1ab;color:#17243c}@media(max-width:1000px){.pay-toolbar{flex-wrap:wrap}.pay-search{margin-left:0}.pay-summary{gap:22px;flex-wrap:wrap}.pay-summary strong{font-size:22px}}@media(max-width:700px){.mobile-back{display:block;margin-top:16px}.pay-demo{align-items:start;flex-direction:column}.pay-toolbar label{flex:1;max-width:none}.pay-tabs{width:100%}.pay-summary{display:grid;grid-template-columns:1fr 1fr}.pay-editor{padding:16px}.pay-editor form{align-items:stretch}.pay-editor label{width:100%}.pay-editor button{min-height:44px}}
/* Accessible foregrounds scoped to the payments example. */
body .primary{background:#a65b00;color:#fff}body .primary:hover{background:#864900}body input::placeholder{color:#59677d}body .page-heading p{color:#53637b}
.pay-summary{gap:24px;flex-wrap:wrap}.pay-allocation{width:100%;border:1px solid var(--line);border-radius:8px;padding:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pay-allocation legend{font-weight:600;padding:0 6px}.pay-editor .pay-allocation label{display:flex;flex-direction:row;align-items:center;gap:10px;min-width:0;font-weight:400}.pay-allocation input{width:18px;height:18px;accent-color:#a65b00;flex-shrink:0}.pay-allocation-preview{width:100%;padding:16px;background:#f3f6fa;border-radius:8px}.pay-allocation-preview p{margin-bottom:0}@media(max-width:700px){.pay-allocation{grid-template-columns:1fr}}