/* Shared DOM preserves upload state while previews switch between all layouts. */
.zp-layout-body { display:contents; }
.zp-layout-intro, .zp-layout-window, .zp-layout-rail, .zp-layout-orbit, .zp-layout-stamp, .zp-layout-side-note { display:none; }
.zp-transfer, .zp-receipt-content { min-width:0; }
.zp-amount > strong { min-width:0; max-width:100%; line-height:1.8; text-align:end; overflow-wrap:anywhere; }
.zp-amount .woocommerce-Price-amount { display:inline; }
.zp-layout-body .zp-live-copy:empty { display:none; }
.zp-payment:is(.zp-style-rail,.zp-style-showcase,.zp-style-mono,.zp-style-orbit,.zp-style-bento,.zp-style-strip,.zp-style-window,.zp-style-stamp,.zp-style-line,.zp-style-calm):not(.zp-confirmation) { --zpl-tone:#5150dd; --zpl-tint:#f5f4ff; container:zero-pay-layout / inline-size; max-width:1080px; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
.zp-payment:is(.zp-style-rail,.zp-style-showcase,.zp-style-mono,.zp-style-orbit,.zp-style-bento,.zp-style-strip,.zp-style-window,.zp-style-stamp,.zp-style-line,.zp-style-calm) .zp-layout-intro { display:block; margin-bottom:24px; color:var(--zp-text); }
.zp-layout-intro > span { color:var(--zp-muted); font-size:12px; }
.zp-payment .zp-layout-intro > p { margin:5px 0 9px; font-size:clamp(21px,3.5cqi,30px); line-height:1.7; font-weight:750; }
.zp-layout-intro > small { display:block; color:var(--zp-muted); font-size:13px; line-height:1.9; }
.zp-payment:is(.zp-style-rail,.zp-style-showcase,.zp-style-mono,.zp-style-orbit,.zp-style-bento,.zp-style-strip,.zp-style-window,.zp-style-stamp,.zp-style-line,.zp-style-calm) .zp-layout-body { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; min-width:0; }
.zp-payment:is(.zp-style-rail,.zp-style-showcase,.zp-style-mono,.zp-style-orbit,.zp-style-bento,.zp-style-strip,.zp-style-window,.zp-style-stamp,.zp-style-line,.zp-style-calm) :is(.zp-transfer,.zp-receipt-area) { position:relative; min-width:0; margin:0; padding:26px; border:1px solid var(--zp-border); border-radius:20px; background:var(--zp-surface); }
.zp-payment:is(.zp-style-rail,.zp-style-showcase,.zp-style-mono,.zp-style-orbit,.zp-style-bento,.zp-style-strip,.zp-style-window,.zp-style-stamp,.zp-style-line,.zp-style-calm) .zp-bank-card { container-type:inline-size; }
.zp-payment:is(.zp-style-rail,.zp-style-showcase,.zp-style-mono,.zp-style-orbit,.zp-style-bento,.zp-style-strip,.zp-style-window,.zp-style-stamp,.zp-style-line,.zp-style-calm) .zp-card-digits { font-size:clamp(14px,8.1cqi,28px); letter-spacing:.025em; }
.zp-layout-body .zp-copy { min-height:44px; }
.zp-layout-body .zp-section-heading h3 { font-size:17px; line-height:1.7; }
.zp-payment.zp-checkout .zp-layout-intro { margin-bottom:16px; }
.zp-payment.zp-checkout .zp-layout-intro > p { font-size:21px; }
/* 01 — Rail: a real third column, collapsed to a horizontal rail in narrow panels. */
.zp-payment.zp-style-rail .zp-layout-body { border:1px solid var(--zp-border); border-radius:24px; overflow:hidden; gap:0; }
.zp-style-rail .zp-layout-rail { display:flex; justify-content:space-between; gap:8px; padding:18px; background:var(--zp-soft); }
.zp-layout-rail > span { display:flex; align-items:center; gap:7px; color:var(--zp-muted); font-size:12px; min-width:0; }
.zp-layout-rail > span:first-child { color:var(--zp-text); font-weight:650; }
.zp-layout-rail i { display:grid; place-items:center; flex:0 0 26px; width:26px; height:26px; border:1px solid var(--zp-border); border-radius:50%; font-style:normal; }
.zp-payment.zp-style-rail :is(.zp-transfer,.zp-receipt-area) { border:0; border-radius:0; }
.zp-payment.zp-style-rail .zp-receipt-area { border-top:1px solid var(--zp-border); }
.zp-style-rail .zp-bank-card { background:#3735a3 linear-gradient(125deg,#6260ee,#3735a3); color:#fff; border:0; box-shadow:0 14px 25px -15px #3735a399; }
.zp-style-rail .zp-bank-card .zp-copy { background:#ffffff12; color:#fff; border-color:#ffffff66; }
/* 02 — Showcase: a dark destination cover and inset receipt surface. */
.zp-payment.zp-style-showcase .zp-layout-body { gap:0; padding:12px; border-radius:28px; background:#123d3e; }
.zp-payment.zp-style-showcase .zp-transfer { --zp-text:#f2fbf8; --zp-muted:#c5e2df; --zp-border:#ffffff55; border:0; background:radial-gradient(ellipse at 0 0,#ffffff17,transparent 70%); color:#fff; }
.zp-style-showcase .zp-transfer .zp-step { background:#ffffff18; border:1px solid #ffffff55; color:#fff; }
.zp-style-showcase .zp-bank-card { color:#273c37; background:#e9d8a7 linear-gradient(130deg,#e9d8a7,#f6edcf); border:0; border-radius:18px; box-shadow:0 20px 30px -20px #000; }
.zp-style-showcase .zp-bank-card .zp-copy { background:#fff9; color:#273c37; border-color:#9a9f85; }
.zp-style-showcase .zp-bank-card .zp-card-label { color:#273c37; }
.zp-style-showcase .zp-amount { background:transparent; border:0; padding-inline:0; }
.zp-payment.zp-style-showcase .zp-receipt-area { border:0; border-radius:21px; }
.zp-style-showcase .zp-upload-field { background:var(--zp-surface); border-style:solid; }
.zp-style-showcase .zp-upload-label > svg { border-radius:50%; }
/* 03 — Mono: typography and rules replace the bank-card metaphor. */
.zp-payment.zp-style-mono { --zp-surface:#f5f2ea; --zp-soft:#eeebe2; --zp-border:#b9b5a9; --zp-text:#20272b; --zp-muted:#5c605a; }
.zp-style-mono .zp-layout-intro { border-top:4px solid var(--zp-text); padding-top:18px; }
.zp-payment.zp-style-mono .zp-layout-intro > p { font-size:clamp(26px,4cqi,38px); }
.zp-payment.zp-style-mono .zp-layout-body { border-top:1px solid var(--zp-border); padding-top:25px; gap:30px; }
.zp-payment.zp-style-mono .zp-transfer { padding:0; border:0; border-radius:0; background:none; }
.zp-style-mono .zp-bank-card { padding:0; border:0; border-radius:0; background:none; }
.zp-style-mono .zp-bank-top > svg, .zp-style-mono .zp-card-label { display:none; }
.zp-payment.zp-style-mono .zp-card-digits { border-bottom:1px solid var(--zp-border); padding-bottom:16px; margin:18px 0; font-size:clamp(16px,8.1cqi,34px); }
.zp-style-mono .zp-amount { border:0; border-top:1px solid var(--zp-border); border-radius:0; background:none; padding-inline:0; }
.zp-payment.zp-style-mono .zp-receipt-area { --zp-text:#f3f0e8; --zp-muted:#cdd0ca; --zp-border:#81877d; --zp-surface:#252a2b; --zp-soft:#303735; background:var(--zp-surface); color:var(--zp-text); border:0; border-radius:0; }
.zp-style-mono .zp-upload-field, .zp-style-mono .zp-submit, .zp-style-mono .zp-copy, .zp-style-mono .zp-step { border-radius:0; }
.zp-style-mono .zp-upload-label > svg { color:var(--zp-text); }
/* 04 — Orbit: a destination medallion above an unframed transfer panel. */
.zp-payment.zp-style-orbit { --zp-soft:#f4effb; --zp-border:#dacdec; --zpl-tone:#7151c7; }
.zp-payment.zp-style-orbit .zp-transfer { border:0; background:none; padding:16px; }
.zp-style-orbit .zp-layout-orbit { display:grid; place-items:center; width:122px; height:122px; border:1px dashed var(--zp-border); border-radius:50%; box-shadow:0 0 0 12px var(--zp-soft); margin:4px auto 25px; }
.zp-layout-orbit > span { display:grid; place-items:center; width:90px; height:90px; background:var(--zp-soft); border-radius:50%; color:var(--zp-text); }
.zp-style-orbit .zp-section-heading { justify-content:center; }
.zp-style-orbit .zp-bank-card { border:0; border-radius:22px; background:var(--zp-surface); }
.zp-style-orbit .zp-bank-top { justify-content:center; }
.zp-style-orbit .zp-bank-top > svg { display:none; }
.zp-style-orbit .zp-card-label, .zp-style-orbit .zp-card-digits { text-align:center; }
.zp-style-orbit .zp-bank-bottom { justify-content:center; }
.zp-payment.zp-style-orbit .zp-receipt-area { border-radius:28px; }
.zp-style-orbit .zp-upload-field { border-radius:23px; }
.zp-style-orbit .zp-submit { border-radius:50px; }
/* 05 — Bento: the amount becomes an independent tile in the outer grid. */
.zp-payment.zp-style-bento { --zp-soft:#eef8f2; --zp-border:#cbded2; --zpl-tone:#1c7669; }
.zp-payment.zp-style-bento .zp-layout-body { gap:14px; }
.zp-payment.zp-style-bento .zp-transfer { display:contents; }
.zp-style-bento .zp-transfer > .zp-section-heading { display:none; }
.zp-style-bento .zp-bank-card { background:#d8ede1; color:#213e35; border:0; border-radius:22px; padding:28px; }
.zp-style-bento .zp-bank-card .zp-copy { background:#ffffff80; color:#213e35; border-color:#95b8a6; }
.zp-style-bento .zp-amount { display:flex; margin:0; padding:24px; border:0; border-radius:22px; background:#cbdc7f; --zp-text:#213b26; --zp-muted:#334d32; }
.zp-style-bento .zp-amount strong { font-size:24px; }
.zp-style-bento .zp-receipt-area { grid-column:1/-1; }
.zp-style-bento .zp-live-copy { grid-column:1/-1; }
/* 06 — Strip: a horizontal transaction record and compact upload row. */
.zp-payment.zp-style-strip .zp-layout-body { gap:0; border:1px solid var(--zp-border); border-radius:16px; overflow:hidden; }
.zp-payment.zp-style-strip .zp-transfer, .zp-payment.zp-style-strip .zp-receipt-area { border:0; border-radius:0; }
.zp-payment.zp-style-strip .zp-transfer { background:var(--zp-soft); }
.zp-payment.zp-style-strip .zp-receipt-area { border-top:1px solid var(--zp-border); }
.zp-style-strip .zp-bank-card { padding:0; background:none; border:0; border-radius:0; }
.zp-style-strip .zp-bank-top > svg { display:none; }
.zp-style-strip .zp-bank-top { margin-bottom:12px; }
.zp-style-strip .zp-amount { border:0; border-top:1px solid var(--zp-border); border-radius:0; padding:15px 0 0; background:none; }
.zp-style-strip .zp-upload-label { min-height:130px; }
/* 07 — Window: shared window chrome, a file tray and a destination sidebar. */
.zp-payment.zp-style-window .zp-layout-body { gap:0; border:1px solid var(--zp-border); border-radius:16px; overflow:hidden; background:var(--zp-surface); }
.zp-style-window .zp-layout-window { display:block; grid-column:1/-1; }
.zp-layout-window > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; background:var(--zp-soft); color:var(--zp-muted); font-size:11px; border-bottom:1px solid var(--zp-border); }
.zp-layout-window b { font-family:Arial,sans-serif; font-size:11px; font-weight:500; letter-spacing:.05em; }
.zp-payment .zp-layout-window > p { display:flex; gap:25px; padding:13px 22px; border-bottom:1px solid var(--zp-border); font-size:12px; color:var(--zp-muted); }
.zp-layout-window strong { color:var(--zp-text); }
.zp-payment.zp-style-window :is(.zp-transfer,.zp-receipt-area) { border:0; border-radius:0; }
.zp-payment.zp-style-window .zp-transfer { background:var(--zp-soft); border-bottom:1px solid var(--zp-border); }
.zp-style-window .zp-bank-card { background:var(--zp-surface); border-radius:9px; padding:18px; }
.zp-style-window .zp-amount { padding:15px 0 0; background:none; border:0; }
.zp-style-window .zp-upload-field, .zp-style-window .zp-submit { border-radius:8px; }
/* 08 — Stamp: ruled paper, a tear-off destination stub and an ornamental seal. */
.zp-payment.zp-style-stamp { --zp-surface:#fffdf6; --zp-soft:#f6f1e5; --zp-border:#d8cbb6; --zp-text:#43392e; --zp-muted:#705d49; }
.zp-payment.zp-style-stamp .zp-layout-body { gap:0; background:var(--zp-surface); border-top:5px solid var(--zp-text); box-shadow:0 20px 50px -30px #594a36; }
.zp-payment.zp-style-stamp :is(.zp-transfer,.zp-receipt-area) { border:0; background:none; border-radius:0; }
.zp-payment.zp-style-stamp .zp-transfer { border-bottom:2px dashed var(--zp-border); }
.zp-style-stamp .zp-bank-card { border:0; border-radius:0; background:none; padding:0; }
.zp-style-stamp .zp-bank-top > svg { display:none; }
.zp-style-stamp .zp-card-digits { padding:18px 0; border-block:1px solid var(--zp-border); margin:14px 0; }
.zp-style-stamp .zp-amount { border:0; border-bottom:1px solid var(--zp-border); border-radius:0; background:none; padding-inline:0; }
.zp-style-stamp .zp-layout-stamp { display:grid; place-content:center; width:66px; height:66px; border:2px solid var(--zp-muted); border-radius:50%; margin-top:20px; margin-inline-start:auto; color:var(--zp-muted); font-size:10px; text-align:center; line-height:1.8; transform:rotate(-12deg); }
.zp-style-stamp .zp-upload-field, .zp-style-stamp .zp-submit, .zp-style-stamp .zp-step, .zp-style-stamp .zp-copy { border-radius:0; }
/* 09 — Line: an exposed numbered path and a wide destination record. */
.zp-payment.zp-style-line { --zp-soft:#eff9f7; --zp-border:#bcd9d2; }
.zp-payment.zp-style-line .zp-layout-body { gap:0; }
.zp-payment.zp-style-line :is(.zp-transfer,.zp-receipt-area) { border:0; border-inline-start:1px solid var(--zp-border); margin-inline-start:16px; padding:0 30px 30px 0; border-radius:0; background:none; }
.zp-payment.zp-style-line .zp-receipt-area { border-color:transparent; }
.zp-style-line .zp-step { position:absolute; right:-16px; top:0; border:1px solid var(--zp-border); border-radius:50%; width:32px; height:32px; background:var(--zp-surface); color:var(--zp-text); }
.zp-style-line .zp-bank-card { border-radius:8px; background:var(--zp-surface); padding:20px; }
.zp-style-line .zp-bank-top > svg { display:none; }
.zp-style-line .zp-bank-bottom { padding-top:10px; border-top:1px solid var(--zp-border); }
.zp-style-line .zp-amount { padding:15px 0 0; background:none; border:0; }
.zp-style-line .zp-submit { border-radius:7px; }
.zp-style-line .zp-upload-field { border-radius:8px; }
/* 10 — Calm: warm asymmetric surfaces and a separate amount medallion. */
.zp-payment.zp-style-calm { --zp-surface:#fffaf4; --zp-soft:#f5e9df; --zp-border:#e1c6b7; --zp-text:#573e34; --zp-muted:#795a4b; }
.zp-payment.zp-style-calm .zp-layout-body { gap:0; border:1px solid var(--zp-border); border-radius:60px 22px 22px 22px; overflow:hidden; background:var(--zp-surface); }
.zp-payment.zp-style-calm :is(.zp-transfer,.zp-receipt-area) { border:0; border-radius:0; padding:30px; }
.zp-payment.zp-style-calm .zp-transfer { background:#f1ddce; }
.zp-style-calm .zp-bank-card { border:0; background:none; border-radius:0; padding:0; }
.zp-style-calm .zp-bank-top > svg { display:none; }
.zp-style-calm .zp-card-digits { margin:25px 0; }
.zp-style-calm .zp-amount { border:0; border-radius:45px; background:var(--zp-surface); padding:14px 20px; }
.zp-style-calm .zp-upload-field { border:0; border-radius:50px 18px 18px 18px; }
.zp-style-calm .zp-submit, .zp-style-calm .zp-copy { border-radius:40px; }
/* Container width, rather than the browser width, governs Elementor and checkout columns. */
@container zero-pay-layout (min-width:720px) {
    .zp-payment:is(.zp-style-rail,.zp-style-showcase,.zp-style-mono,.zp-style-orbit,.zp-style-window,.zp-style-stamp,.zp-style-calm) .zp-layout-body { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .zp-style-rail .zp-layout-rail { grid-column:1/-1; }
    .zp-payment.zp-style-rail .zp-receipt-area { border-top:0; border-inline-start:1px solid var(--zp-border); }
    .zp-payment.zp-style-window .zp-transfer { border-bottom:0; border-inline-end:1px solid var(--zp-border); }
    .zp-payment.zp-style-stamp .zp-transfer { border-bottom:0; border-inline-end:2px dashed var(--zp-border); }
    .zp-payment.zp-style-bento .zp-layout-body { grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr); }
    .zp-style-bento .zp-amount { flex-direction:column; justify-content:space-between; align-items:flex-start; }
    .zp-style-bento .zp-amount strong { text-align:start; font-size:28px; }
    .zp-payment:is(.zp-style-bento,.zp-style-strip) .zp-receipt-area { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:start; gap:25px; }
    .zp-payment:is(.zp-style-bento,.zp-style-strip) .zp-receipt-area > .zp-section-heading { align-items:flex-start; }
    .zp-payment:is(.zp-style-bento,.zp-style-strip) .zp-layout-side-note { display:block; grid-column:1; grid-row:2; color:var(--zp-muted); font-size:13px; line-height:2; }
    .zp-payment:is(.zp-style-bento,.zp-style-strip) .zp-receipt-content { grid-column:2; grid-row:1/3; }
    .zp-style-strip .zp-transfer { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr); gap:20px 30px; }
    .zp-style-strip .zp-transfer > .zp-section-heading { grid-column:1/-1; margin-bottom:0; }
    .zp-style-strip .zp-amount { display:block; margin:0; padding:0 24px 0 0; border-top:0; border-inline-start:1px solid var(--zp-border); align-self:center; }
    .zp-style-strip .zp-amount strong { display:block; text-align:start; margin-top:12px; }
    .zp-style-strip .zp-live-copy { grid-column:1/-1; }
    .zp-style-line .zp-bank-card { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:8px 20px; }
    .zp-style-line .zp-bank-top { grid-column:1; grid-row:1; margin:0; }
    .zp-style-line .zp-card-label { grid-column:1; grid-row:2; margin:0; }
    .zp-style-line .zp-card-digits { grid-column:2; grid-row:1/3; align-self:center; font-size:clamp(18px,3.2cqi,29px); }
    .zp-style-line .zp-bank-bottom { grid-column:1/-1; }
    .zp-style-line .zp-upload-label { flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:14px; min-height:95px; padding-inline:24px; }
    .zp-style-line .zp-submit { width:auto; min-width:240px; margin-top:16px; }
}
@container zero-pay-layout (min-width:920px) {
    .zp-payment.zp-style-rail .zp-layout-body { grid-template-columns:140px minmax(0,1fr) minmax(0,1fr); }
    .zp-style-rail .zp-layout-rail { grid-column:auto; flex-direction:column; justify-content:flex-start; gap:32px; padding:30px 18px; }
}
@container zero-pay-layout (max-width:420px) {
    .zp-payment:is(.zp-style-rail,.zp-style-showcase,.zp-style-mono,.zp-style-orbit,.zp-style-bento,.zp-style-strip,.zp-style-window,.zp-style-stamp,.zp-style-line,.zp-style-calm) :is(.zp-transfer,.zp-receipt-area) { padding:20px 16px; }
    .zp-payment.zp-style-line :is(.zp-transfer,.zp-receipt-area) { padding:0 25px 25px 0; }
    .zp-payment.zp-style-mono .zp-transfer { padding:0; }
    .zp-payment.zp-style-orbit .zp-transfer { padding:16px 8px; }
    .zp-style-rail .zp-layout-rail { padding:14px 10px; gap:5px; }
    .zp-layout-rail > span { gap:4px; font-size:10px; }
    .zp-layout-rail i { flex-basis:22px; width:22px; height:22px; }
    .zp-style-bento .zp-bank-card { padding:20px; }
    .zp-style-bento .zp-amount { padding:18px 20px; }
    .zp-layout-body .zp-bank-card { padding-inline:16px; }
    .zp-style-window .zp-layout-window > div { padding-inline:14px; }
    .zp-payment .zp-layout-window > p { padding-inline:14px; gap:14px; }
    .zp-style-orbit .zp-layout-orbit { width:100px; height:100px; margin-bottom:22px; }
    .zp-layout-orbit > span { width:76px; height:76px; }
    .zp-payment.zp-style-calm .zp-layout-body { border-start-start-radius:44px; }
}
@media (prefers-reduced-motion:reduce) { .zp-layout-body *, .zp-layout-intro { transition:none; } }