.bb-pp{margin:28px 0;padding:24px;border:1px solid #E6E8EE;border-radius:18px;background:#fff}
.bb-pp__h{margin:0 0 6px;font-size:20px;font-weight:800}
.bb-pp__lead{margin:0 0 18px;color:#4A5468;line-height:1.55;max-width:60ch}
.bb-pp__grid{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
.bb-pp__qr{width:min(220px,60vw);aspect-ratio:1;padding:12px;border:1px solid #E6E8EE;border-radius:14px;background:#fff;flex:none}
.bb-pp__qr svg{display:block;width:100%;height:100%}
.bb-pp__facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-content:start;font-size:14px}
.bb-pp__facts dt{color:#6B7385;font-weight:600}
.bb-pp__facts dd{margin:0;font-weight:700}
.bb-pp__amount{font-size:19px}
.bb-pp__form{margin-top:22px;padding-top:20px;border-top:1px solid #EEF0F5}
.bb-pp__label{display:block;font-weight:700;margin-bottom:8px}
.bb-pp__file{display:block;width:100%;max-width:420px;padding:10px;border:1px dashed #C9CEDC;border-radius:12px;background:#FAFBFF}
.bb-pp__hint{margin:8px 0 14px;font-size:13px;color:#6B7385}
.bb-pp__submit{appearance:none;border:0;border-radius:999px;padding:13px 26px;font-weight:800;font-size:15px;
  background:#4B2BE0;color:#fff;cursor:pointer}
.bb-pp__submit:hover{filter:brightness(1.08)}
.bb-pp__submit:disabled{opacity:.6;cursor:default}
.bb-pp__done{margin:18px 0 0;padding:12px 14px;border-radius:12px;background:#EEFBF3;color:#14532D;line-height:1.5}
.bb-pp__again{margin:10px 0 0;font-size:13px;color:#6B7385}
.bb-pp__fallback{font-size:13px;color:#6B7385}
@media(max-width:560px){.bb-pp{padding:18px}.bb-pp__grid{gap:18px}}

/* ------------------------------------------------------------------ *
 * PromptPay inside the block checkout
 * ------------------------------------------------------------------ */

.bb-ppc{font-size:15px;line-height:1.55}
.bb-ppc__lead{margin:0 0 14px;color:#4a4643}
.bb-ppc__err{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#fdf0ee;color:#8a2c1c}
.bb-ppc__loading{margin:0;color:#6b6560}

.bb-ppc__grid{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.bb-ppc__qr{flex:0 0 168px;width:168px;height:168px;padding:10px;background:#fff;
  border:1px solid #e7e1da;border-radius:14px}
.bb-ppc__qr svg{display:block;width:100%;height:100%}

.bb-ppc__facts{flex:1 1 220px;margin:0;display:grid;gap:10px}
.bb-ppc__facts dt{margin:0;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#8a837c}
.bb-ppc__facts dd{margin:2px 0 0;font-size:15px;color:#221f1d}
.bb-ppc__amount{font-size:22px !important;font-weight:600;letter-spacing:-.01em}
.bb-ppc__fx{display:block;margin-top:4px;font-size:12px;line-height:1.45;color:#8a837c}

.bb-ppc__slip{margin:18px 0 0;padding:14px;border:1px dashed #ded7ce;border-radius:12px;background:#fbf9f6}
.bb-ppc__slipLabel{display:block;margin-bottom:8px;font-size:13px;color:#4a4643}
.bb-ppc__slip input[type=file]{font-size:13px;max-width:100%}
.bb-ppc__busy,.bb-ppc__slipName{display:inline-block;margin-left:8px;font-size:12px;color:#6b6560}
.bb-ppc__after{margin:14px 0 0;font-size:13px;color:#6b6560}

/* the mark in the express row */
.bb-ppx{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  min-height:48px;padding:0 16px;border:1px solid #d9d2ca;border-radius:10px;
  background:#fff;color:#221f1d;font:inherit;font-size:15px;font-weight:500;
  cursor:pointer;transition:border-color .15s ease,background .15s ease}
.bb-ppx:hover{border-color:#221f1d;background:#fbf9f6}
.bb-ppx:focus-visible{outline:2px solid #221f1d;outline-offset:2px}
.bb-ppx__mark{height:22px;width:auto}

@media (max-width:520px){
  .bb-ppc__qr{flex:0 0 100%;width:100%;height:auto;aspect-ratio:1/1}
}

/* Once a slip is in, the form is a footnote, not the main event. */
.bb-pp__done{margin:16px 0 0;padding:12px 14px;border-radius:10px;
  background:#EAF3EC;color:#24503a;font-size:14px;line-height:1.5}
.bb-pp__replace{margin-top:12px}
.bb-pp__replace>summary{cursor:pointer;font-size:13px;color:#6b6560;
  list-style:none;display:inline-flex;align-items:center;gap:6px}
.bb-pp__replace>summary::-webkit-details-marker{display:none}
.bb-pp__replace>summary::before{content:"+";font-size:15px;line-height:1}
.bb-pp__replace[open]>summary::before{content:"–"}
.bb-pp__replace>summary:hover{color:#221f1d}