.hc-payment {
  --payment-confirm: 0;
  --payment-arrival: 0;
  display: grid;
  grid-template-rows: auto minmax(190px, 1fr) auto auto;
  gap: 10px;
  padding: 15px;
  background: #f0f2eb;
  color: #203e32;
  container: payment / inline-size;
}
.hc-payment > * { min-width: 0; }
.hc-payment-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; line-height: 1.4; }
.hc-payment-heading > span:first-child { min-width: 0; }
.hc-payment-heading b { font-weight: 650; white-space: nowrap; }
.hc-payment-status { flex: none; color: #72633b; background: #e8e1c8; border-radius: 20px; padding: 4px 10px; font-size: 11px; font-weight: 750; }
.hc-payment[data-payment-phase="received"] .hc-payment-status { background: #d6eab8; color: #284831; }
.hc-payment-route { display: grid; grid-template-rows: auto 1fr auto; align-items: center; gap: 14px; background: radial-gradient(ellipse at 50% 0, #365b43 0, #254435 75%); color: #f1f5e9; padding: 16px 20px 14px; border: 1px solid #3f5c47; border-radius: 13px; min-width: 0; }
.hc-payment-method { display: inline-flex; justify-self: center; align-items: center; gap: 4px; padding: 6px 12px; border: 1px solid #ffffffa6; border-radius: 7px; background: #fff; color: #253b34; font-size: 15px; line-height: 1; letter-spacing: -.65px; font-weight: 850; box-shadow: 0 3px 10px #132a1b1f; }
.hc-payment-method b { color: #c52d40; font-weight: 850; }
.hc-payment-transfer { display: grid; grid-template-columns: 66px minmax(0, 1fr) 66px; align-items: center; gap: 12px; }
.hc-payment-actor { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.hc-payment-actor strong { font-size: 12px; line-height: 1.2; font-weight: 650; }
.hc-payment-phone { display: block; width: 48px; height: 70px; padding: 6px 4px 5px; border: 2px solid #d0ddc5; border-radius: 10px; background: #172f23; position: relative; box-shadow: 0 6px 12px #112a1b26; }
.hc-payment-phone::before { content: ''; position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 13px; height: 2px; border-radius: 2px; background: #8ca37d; }
.hc-payment-phone-screen { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 5px; background: #f5f7ee; color: #254435; }
.hc-payment-phone-euro { font-size: 23px; font-weight: 650; transform: translateY(-2px); }
.hc-payment-phone-screen > i { position: absolute; bottom: 5px; left: 4px; right: 4px; height: 4px; border-radius: 2px; background: #c52d40; transform: scaleX(var(--payment-confirm)); transform-origin: left; }
.hc-payment-phone-check { position: absolute; inset: 0; display: grid; place-items: center; background: #d6ff70; opacity: 0; }
.hc-payment-phone-check .icon { width: 26px; height: 26px; stroke-width: 2.4; }
.hc-payment[data-payment-phase="transfer"] .hc-payment-phone-check,
.hc-payment[data-payment-phase="received"] .hc-payment-phone-check { opacity: 1; }
.hc-payment[data-payment-phase="transfer"] .hc-payment-phone-screen > i,
.hc-payment[data-payment-phase="received"] .hc-payment-phone-screen > i { opacity: 0; }
.hc-payment-avatar { position: relative; width: 56px; height: 56px; margin: 7px 0; display: grid; place-items: center; border: 1px solid #70866d; border-radius: 50%; background: #365642; color: #e2edda; box-shadow: 0 0 0 calc(var(--payment-arrival) * 7px) #d6ff7012; }
.hc-payment-avatar > .icon { width: 27px; height: 27px; }
.hc-payment-arrival { position: absolute; right: -4px; bottom: -1px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; border: 2px solid #254435; background: #d6ff70; color: #203e32; opacity: var(--payment-arrival); transform: scale(calc(.5 + var(--payment-arrival) * .5)); }
.hc-payment-arrival .icon { width: 12px; height: 12px; stroke-width: 3; }
.hc-payment-bridge { min-width: 0; margin-top: -24px; }
.hc-payment-route-label { display: flex; justify-content: center; align-items: center; gap: 7px; color: #dbe7d4; font-size: 12px; font-weight: 600; line-height: 1.3; text-align: center; min-height: 16px; }
.hc-payment-route-label::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #b3c7a1; flex: none; }
.hc-payment[data-payment-phase="received"] .hc-payment-route-label { color: #d6ff70; }
.hc-payment[data-payment-phase="received"] .hc-payment-route-label::before { background: #d6ff70; }
.hc-payment-track { position: relative; width: 100%; height: 34px; }
.hc-payment-track::before { content: ''; height: 1px; position: absolute; top: 50%; left: 0; right: 0; background: repeating-linear-gradient(to right, #81966c 0, #81966c 4px, transparent 4px, transparent 9px); }
.hc-payment-track-fill { display: block; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left; background: #d6ff70; }
.hc-payment-direction { position: absolute; right: -6px; top: 8px; color: #b5cd9a; }
.hc-payment-direction .icon { height: 18px; width: 18px; }
.hc-payment-token { position: absolute; top: 0; left: 0; display: inline-grid; place-items: center; min-width: 68px; height: 34px; padding: 0 9px; background: #d6ff70; color: #203e32; font-size: 16px; font-weight: 800; letter-spacing: -.3px; line-height: 1; border-radius: 7px; box-shadow: 0 4px 12px #1026192e; white-space: nowrap; will-change: left, transform; }
.hc-payment-balances { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; padding-top: 3px; }
.hc-payment-balances > div { min-width: 0; }
.hc-payment-balances > div + div { padding-left: 15px; border-left: 1px solid #d1dbcc; }
.hc-payment-balances span { display: block; font-size: 11px; color: #5c6c56; line-height: 1.3; }
.hc-payment-balances strong { display: block; margin-top: 2px; color: #203e32; font-size: 32px; line-height: 1.12; letter-spacing: -1.2px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hc-payment-balances > div:last-child strong { color: #8b7548; }
.hc-payment[data-payment-phase="received"] .hc-payment-balances > div:last-child strong { color: #477d3f; }
.hc-payment-history { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hc-payment-entry { display: flex; align-items: center; justify-content: space-between; gap: 5px; border: 1px solid #d6dfce; border-radius: 5px; background: #f9fbf5; min-height: 32px; padding: 5px 8px; line-height: 1.2; }
.hc-payment-entry small { font-size: 10px; color: #687a60; white-space: nowrap; }
.hc-payment-entry strong { font-size: 12px; white-space: nowrap; font-weight: 700; }
.hc-payment-entry-pending { background: transparent; border-style: dashed; color: #94876b; }
.hc-payment-entry-pending strong { font-weight: 500; }
.hc-payment-entry-pending small { color: #8b7b60; }
@container payment (min-width: 430px) {
  .hc-payment-route { padding: 15px 30px; gap: 12px; }
  .hc-payment-transfer { grid-template-columns: 82px minmax(0, 1fr) 82px; gap: 25px; }
  .hc-payment-actor strong { font-size: 13px; }
  .hc-payment-token { min-width: 80px; font-size: 18px; }
  .hc-payment-heading { font-size: 12px; }
  .hc-payment-balances span { font-size: 12px; }
  .hc-payment-entry { padding-left: 13px; padding-right: 13px; }
}
@container payment (max-width: 310px) {
  .hc-payment-route { padding: 18px 11px; }
  .hc-payment-transfer { grid-template-columns: 53px minmax(0, 1fr) 53px; gap: 8px; }
  .hc-payment-heading > span:first-child { max-width: 160px; }
  .hc-payment-heading b { display: block; }
  .hc-payment-token { min-width: 62px; font-size: 14px; padding: 0 6px; }
  .hc-payment-avatar { width: 49px; height: 49px; margin: 10.5px 0; }
  .hc-payment-balances { gap: 9px; }
  .hc-payment-balances > div + div { padding-left: 10px; }
  .hc-payment-balances strong { font-size: 30px; }
  .hc-payment-entry { flex-direction: column; align-items: flex-start; gap: 3px; padding-left: 7px; padding-right: 7px; }
  .hc-payment-entry strong { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-payment-token { will-change: auto; }
}