/* City Move Xero invoice payments. Brand: #18cb96 accent, #373643 dark, Manrope. */
.cmxp{
	--cmxp-accent:#18cb96;
	--cmxp-dark:#373643;
	--cmxp-ink:#2b2a35;
	--cmxp-muted:#6c6e76;
	--cmxp-line:#e2e4e7;
	--cmxp-line-soft:#eef0f1;
	--cmxp-panel:#fff;
	--cmxp-field:#fff;
	--cmxp-shadow:0 1px 2px rgba(43,42,53,.05),0 8px 24px rgba(43,42,53,.06);
	max-width:620px;margin:0 auto;color:var(--cmxp-ink);
	font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
.cmxp *,.cmxp *::before,.cmxp *::after{box-sizing:border-box}

.cmxp-form{background:var(--cmxp-panel);border:1px solid var(--cmxp-line);border-radius:12px;
	box-shadow:var(--cmxp-shadow);padding:22px;display:grid;gap:18px}
.cmxp-head h2{margin:0 0 5px;font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.cmxp-head p{margin:0;font-size:13.5px;color:var(--cmxp-muted);line-height:1.5}

.cmxp-f{display:grid;gap:7px}
.cmxp-f label{font-size:13.5px;font-weight:600}
.cmxp-f input{font-family:inherit;font-size:16px;color:var(--cmxp-ink);background:var(--cmxp-field);
	border:1px solid #d6d9dd;border-radius:8px;padding:12px 13px;width:100%;line-height:1.3}
.cmxp-f input:focus-visible{outline:2px solid var(--cmxp-accent);outline-offset:1px;border-color:var(--cmxp-accent)}
.cmxp-row{display:grid;gap:18px}
@media(min-width:520px){.cmxp-row{grid-template-columns:1fr 1fr}}
.cmxp-amt{position:relative}
.cmxp-amt span{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--cmxp-muted);font-size:16px}
.cmxp-amt input{padding-left:27px;font-variant-numeric:tabular-nums}
.cmxp-hint{margin:0;font-size:12.5px;color:var(--cmxp-muted);line-height:1.5}

.cmxp-go{font-family:inherit;font-size:15.5px;font-weight:700;letter-spacing:.02em;
	background:var(--cmxp-accent);color:#0b241c;border:0;border-radius:8px;padding:14px 18px;
	cursor:pointer;width:100%;transition:filter .15s ease}
.cmxp-go:hover{filter:brightness(1.06)}
.cmxp-go:focus-visible{outline:2px solid var(--cmxp-ink);outline-offset:2px}
.cmxp-go[disabled]{opacity:.6;cursor:progress}

.cmxp-secure{display:flex;gap:9px;align-items:flex-start;margin:0;
	font-size:12.5px;color:var(--cmxp-muted);line-height:1.5}
.cmxp-secure svg{flex:0 0 auto;margin-top:2px}

#cmxp-out{margin-top:22px}
#cmxp-out:empty{display:none}

.cmxp-result{background:var(--cmxp-panel);border:1px solid var(--cmxp-line);border-radius:12px;
	box-shadow:var(--cmxp-shadow);overflow:hidden}
.cmxp-top{padding:20px 22px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.cmxp-kicker{font-size:12px;color:var(--cmxp-muted);margin:0 0 3px;letter-spacing:.06em;font-weight:600}
.cmxp-num{font-size:21px;font-weight:800;margin:0;letter-spacing:-.01em}

.cmxp-chip{display:inline-flex;align-items:center;padding:6px 13px;border-radius:999px;
	font-size:12px;font-weight:700;letter-spacing:.05em;color:#fff;white-space:nowrap}
.cmxp-chip.is-paid{background:#2e8b57}
.cmxp-chip.is-open{background:#b2700d}
.cmxp-chip.is-over{background:#c62424}

.cmxp-lines{border-top:1px solid var(--cmxp-line-soft)}
.cmxp-line{display:flex;justify-content:space-between;gap:18px;padding:12px 22px;
	border-bottom:1px solid var(--cmxp-line-soft);font-size:14.5px}
.cmxp-line:last-child{border-bottom:0}
.cmxp-line dt{color:var(--cmxp-muted);margin:0}
.cmxp-line dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.cmxp-line.is-total dd{font-size:19px;font-weight:800}
.cmxp-line.is-total dt{align-self:center}

.cmxp-act{padding:20px 22px;border-top:1px solid var(--cmxp-line);display:grid;gap:11px}
.cmxp-pay{display:block;text-align:center;text-decoration:none;background:var(--cmxp-accent);
	color:#0b241c;font-weight:800;font-size:16px;padding:15px 18px;border-radius:8px}
.cmxp-pay:hover{filter:brightness(1.06);color:#0b241c}
.cmxp-pay:focus-visible{outline:2px solid var(--cmxp-ink);outline-offset:2px}
.cmxp-act p{margin:0;font-size:12.5px;color:var(--cmxp-muted);text-align:center;line-height:1.55}
.cmxp-lag{padding-top:3px}

.cmxp-settled{padding:18px 22px;border-top:1px solid var(--cmxp-line);font-size:14px;color:var(--cmxp-muted);line-height:1.6}
.cmxp-settled strong{color:var(--cmxp-ink)}

.cmxp-err{background:var(--cmxp-panel);border:1px solid #f2b5b5;border-radius:12px;
	padding:20px 22px;box-shadow:var(--cmxp-shadow)}
.cmxp-err h3{margin:0 0 8px;font-size:16px;font-weight:700;color:#a62222;line-height:1.35}
.cmxp-err p{margin:0 0 8px;font-size:14px;color:var(--cmxp-muted);line-height:1.55}
.cmxp-err ul{margin:10px 0 0;padding-left:20px;font-size:14px;color:var(--cmxp-muted)}
.cmxp-err li{margin-bottom:5px}
.cmxp-err .cmxp-help{margin:12px 0 0}

@media (prefers-color-scheme:dark){
	.cmxp{--cmxp-panel:#2c2b38;--cmxp-ink:#eceef1;--cmxp-muted:#a3a6b0;
		--cmxp-line:#3b3a49;--cmxp-line-soft:#343343;--cmxp-field:#232230;
		--cmxp-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.28)}
	.cmxp-f input{border-color:#454458}
}
@media (prefers-reduced-motion:reduce){.cmxp *{transition:none!important}}