/* Bagpay app pages (/new, /pay/<id>, /orders/<id>). Sits on top of the site's own stylesheet:
   type, colours and the hero / card classes come from there, this only adds forms and lists. */
.bp-hero.cefi-hero-wrapper { min-height: 0; padding-top: 11rem; padding-bottom: 3rem; }
.bp-hero .cefi-hero-heading { font-size: 5.5rem; }
.bp-hero .cefi-hero-sub { margin-bottom: 0; }
.bp-body { box-sizing: border-box; background: #0a0a0a; border-top: 1px solid #1a1a1a; width: 100%; padding: 4rem 4rem 8rem; }
.bp-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; width: 100%; max-width: 90rem; margin: 0 auto; align-items: start; }
.bp-narrow { width: 100%; max-width: 38rem; margin: 0 auto; }
.bp-wide { width: 100%; max-width: 90rem; margin: 0 auto; }
.bp-card { background: #000; border: 1px solid #1a1a1a; padding: 2.5rem; color: #a0a0a0; font-family: Helvetica Neue, helvetica, arial, sans-serif; font-size: 1.0625rem; line-height: 1.55; }
.bp-card + .bp-card { margin-top: 1rem; }
.bp-eyebrow { color: #ff4d15; letter-spacing: .1em; text-transform: uppercase; font-family: Ppneuebit Hero, monospace; font-size: 1.125rem; margin: 0 0 1.25rem; }
.bp-title { color: #fff; text-transform: uppercase; font-family: Ppneuebit Hero, monospace; font-size: 1.75rem; font-weight: 400; line-height: 1.1; margin: 0 0 .5rem; overflow-wrap: anywhere; }
.bp-price { color: #fff; font-family: var(--font--neuebit-normal-header), Ppneuebit Hero, monospace; font-size: 5rem; line-height: .9; margin: 1.25rem 0 .75rem; }
.bp-price small { font-size: 1.5rem; color: #9a9a9a; margin-left: .5rem; }
.bp-muted { color: #7d7d7d; font-size: .9375rem; }
.bp-mono { font-family: Jetbrains Mono, monospace; font-size: .875rem; overflow-wrap: anywhere; }
.bp-rule { border: 0; border-top: 1px solid #1a1a1a; margin: 2rem 0; }

.bp-field { display: block; margin-bottom: 1.5rem; }
.bp-label { display: block; color: #fff; letter-spacing: .04em; text-transform: uppercase; font-family: Ppneuebit Hero, monospace; font-size: 1.125rem; margin-bottom: .5rem; }
.bp-hint { display: block; color: #7d7d7d; font-size: .9375rem; margin-top: .4rem; }
.bp-input { box-sizing: border-box; width: 100%; background: #0a0a0a; border: 1px solid #2a2a2a; border-radius: 0; color: #fff; padding: .95rem 1rem; font-family: Helvetica Neue, helvetica, arial, sans-serif; font-size: 1.0625rem; outline: none; transition: border-color .15s; }
.bp-input:focus { border-color: #ff4d15; }
.bp-input::placeholder { color: #555; }
.bp-row { display: flex; gap: .75rem; align-items: stretch; }
.bp-row .bp-input { flex: 1; min-width: 0; }
.bp-money { position: relative; }
.bp-money::before { content: '$'; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #7d7d7d; }
.bp-money .bp-input { padding-left: 2rem; }

.bp-btn { cursor: pointer; border: 0; border-radius: 0; color: #fff; letter-spacing: .05em; text-transform: uppercase; background: #ff4d15; display: inline-flex; justify-content: center; align-items: center; gap: .5rem; padding: 1.125rem 2rem; font-family: Ppneuebit Hero, monospace; font-size: 1.125rem; font-weight: 700; text-decoration: none; transition: background-color .15s, border-color .15s; }
.bp-btn:hover { background: #e03f0c; }
.bp-btn[disabled] { background: #2a2a2a; color: #777; cursor: default; }
.bp-btn.is-ghost { background: transparent; border: 1px solid #333; }
.bp-btn.is-ghost:hover { border-color: #fff; background: transparent; }
.bp-btn.is-small { padding: .7rem 1rem; font-size: 1rem; white-space: nowrap; }
.bp-btn.is-full { width: 100%; }

.bp-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.bp-choice label { cursor: pointer; border: 1px solid #2a2a2a; padding: 1rem; display: block; transition: border-color .15s; }
.bp-choice input { position: absolute; opacity: 0; pointer-events: none; }
.bp-choice b { display: block; color: #fff; font-weight: 400; text-transform: uppercase; font-family: Ppneuebit Hero, monospace; font-size: 1.125rem; }
.bp-choice span { color: #7d7d7d; font-size: .9375rem; }
.bp-choice label:has(input:checked) { border-color: #ff4d15; }
.bp-choice label:has(input:focus-visible) { outline: 1px solid #fff; }

.bp-error { color: #ff6a3d; margin: 1rem 0 0; min-height: 1.5em; }
.bp-code { position: relative; background: #0a0a0a; border: 1px solid #2a2a2a; padding: 1rem 5.5rem 1rem 1rem; color: #e6e6e6; white-space: pre-wrap; word-break: break-all; margin: .5rem 0 0; }
.bp-code .bp-btn { position: absolute; top: .5rem; right: .5rem; }
.bp-steps { list-style: none; margin: 0; padding: 0; counter-reset: bp; }
.bp-steps li { counter-increment: bp; position: relative; padding: 0 0 1.5rem 3rem; }
.bp-steps li::before { content: '0' counter(bp); position: absolute; left: 0; top: 0; color: #ff4d15; font-family: Ppneuebit Hero, monospace; font-size: 1.125rem; letter-spacing: .1em; }
.bp-steps b { display: block; color: #fff; font-weight: 400; text-transform: uppercase; font-family: Ppneuebit Hero, monospace; font-size: 1.25rem; }

.bp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; max-height: 23rem; overflow-y: auto; }
.bp-coin { cursor: pointer; width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: .9rem; text-align: left; background: #0a0a0a; border: 1px solid #1f1f1f; border-radius: 0; color: #fff; padding: .8rem 1rem; font: inherit; transition: border-color .15s; }
.bp-coin:hover { border-color: #555; }
.bp-coin.is-on { border-color: #ff4d15; }
.bp-coin[disabled] { cursor: default; opacity: .4; }
.bp-coin[disabled]:hover { border-color: #1f1f1f; }
.bp-coin img, .bp-coin .bp-badge { width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none; object-fit: cover; background: #1a1a1a; }
.bp-badge { display: grid; place-items: center; color: #fff; font-family: Ppneuebit Hero, monospace; font-size: 1.125rem; }
.bp-coin .bp-name { flex: 1; min-width: 0; }
.bp-coin .bp-name b { display: block; font-weight: 400; text-transform: uppercase; font-family: Ppneuebit Hero, monospace; font-size: 1.25rem; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-coin .bp-name span, .bp-coin .bp-right span { color: #7d7d7d; font-size: .875rem; }
.bp-coin .bp-right { text-align: right; flex: none; }
.bp-coin .bp-right b { display: block; font-weight: 400; font-family: Jetbrains Mono, monospace; font-size: .9375rem; }

.bp-lines { margin: 0; }
.bp-lines div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid #141414; }
.bp-lines dt { color: #7d7d7d; }
.bp-lines dd { margin: 0; color: #fff; text-align: right; font-family: Jetbrains Mono, monospace; font-size: .9375rem; }
.bp-wallets { display: grid; gap: .5rem; }
.bp-wallets .bp-btn { justify-content: flex-start; }
.bp-wallets img { width: 1.5rem; height: 1.5rem; }
.bp-line { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.bp-done { color: #fff; text-transform: uppercase; font-family: var(--font--neuebit-normal-header), Ppneuebit Hero, monospace; font-size: 4rem; line-height: .9; margin: 0 0 1rem; }
.bp-spin { display: inline-block; width: 1rem; height: 1rem; border: 2px solid #333; border-top-color: #ff4d15; border-radius: 50%; animation: bp-spin .8s linear infinite; vertical-align: -.15em; margin-right: .5rem; }
@keyframes bp-spin { to { transform: rotate(360deg); } }

.bp-table { width: 100%; border-collapse: collapse; }
.bp-table th { text-align: left; color: #7d7d7d; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; font-family: Ppneuebit Hero, monospace; font-size: 1rem; padding: .75rem .75rem .75rem 0; border-bottom: 1px solid #2a2a2a; }
.bp-table td { color: #e6e6e6; padding: .9rem .75rem .9rem 0; border-bottom: 1px solid #141414; vertical-align: top; }
.bp-table a { color: #ff4d15; }
.bp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
.bp-stats .bp-card + .bp-card { margin-top: 0; }
.bp-stat { color: #fff; font-family: var(--font--neuebit-normal-header), Ppneuebit Hero, monospace; font-size: 3.5rem; line-height: 1; }
.bp-tag { display: inline-block; border: 1px solid #2a2a2a; padding: .15rem .5rem; font-family: Ppneuebit Hero, monospace; text-transform: uppercase; letter-spacing: .06em; font-size: .9375rem; color: #e6e6e6; }
.bp-tag.is-paid { border-color: #ff4d15; color: #ff4d15; }
[hidden] { display: none !important; }

@media (max-width: 991px) {
  .bp-hero.cefi-hero-wrapper { padding-top: 8rem; }
  .bp-hero .cefi-hero-heading { font-size: 3.5rem; }
  .bp-body { padding: 2rem 1.25rem 5rem; }
  .bp-grid, .bp-stats { grid-template-columns: 1fr; }
  .bp-card { padding: 1.5rem; }
  .bp-price { font-size: 3.75rem; }
  .bp-choice { grid-template-columns: 1fr; }
  .bp-table th:nth-child(4), .bp-table td:nth-child(4) { display: none; }
}

/* the site styles every <label> as a small-caps mono caption; forms here set their own type */
.bp-field, .bp-choice label { font-weight: 400; text-transform: none; letter-spacing: 0; font-family: Helvetica Neue, helvetica, arial, sans-serif; }
.bp-hint, .bp-choice span { font-family: Helvetica Neue, helvetica, arial, sans-serif; text-transform: none; letter-spacing: 0; font-weight: 400; }
.bp-input { font-weight: 400; text-transform: none; letter-spacing: 0; }