/* Smart Payment Hub: all styles scoped to .wph; uses the existing WOLFURS theme tokens. */
.wph { position:relative; max-width:1200px; margin:0 auto; padding:64px 24px; color:var(--text); line-height:1.7; }
.wph .wph-hero { max-width:760px; margin-bottom:40px; }
.wph .wph-eyebrow { font-size:11px; font-weight:700; letter-spacing:2px; margin:0 0 12px; }
.wph h1 { color:var(--text); font-size:clamp(32px,5vw,58px); line-height:1.12; letter-spacing:-1.5px; margin:0 0 20px; }
.wph h2 { color:var(--text); font-size:24px; line-height:1.3; margin:0 0 16px; }
.wph h3 { color:var(--text); font-size:17px; margin:0 0 10px; }
.wph p { margin:0 0 16px; }
.wph .wph-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:24px; margin-bottom:24px; }
.wph .wph-card { background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:30px; min-width:0; }
.wph .wph-card-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.wph .wph-badge { border:1px solid var(--border); background:var(--surface-2); padding:5px 12px; border-radius:30px; font-size:12px; }
.wph .wph-details { margin:22px 0 0; }
.wph .wph-details > div { padding:16px 0; border-top:1px solid var(--border); }
.wph dt { font-size:12px; margin-bottom:8px; }
.wph dd { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:0; }
.wph dd span { font-size:clamp(15px,2vw,19px); font-weight:700; letter-spacing:.5px; overflow-wrap:anywhere; min-width:0; }
.wph button, .wph .wph-action { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; padding:10px 16px; border:1px solid var(--border); border-radius:10px; background:var(--btn-bg); color:var(--btn-text); font:inherit; font-size:13px; font-weight:700; text-decoration:none; cursor:pointer; }
.wph button { background:var(--surface-2); color:var(--text); }
.wph button:hover, .wph .wph-action:hover { filter:brightness(.92); }
.wph button:focus-visible, .wph a:focus-visible { outline:3px solid var(--text); outline-offset:4px; }
.wph .wph-status { min-height:28px; font-size:13px; margin:8px 0; }
.wph .wph-note { border-left:3px solid var(--btn-bg); padding:10px 14px; background:var(--surface-2); font-size:13px; margin:16px 0 0; }
.wph .wph-qr { text-align:center; }
.wph .wph-qr img { display:block; width:100%; max-width:260px; height:auto; object-fit:contain; margin:20px auto; background:#fff; border:12px solid #fff; border-radius:12px; }
.wph [hidden] { display:none !important; }
.wph .wph-qr p { font-size:13px; }
.wph .wph-steps { margin-bottom:24px; }
.wph ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; padding-left:24px; margin:24px 0; }
.wph li { padding-left:6px; }
.wph li::marker { font-weight:700; }
.wph li p { font-size:14px; }
.wph .wph-actions { display:flex; gap:12px; flex-wrap:wrap; }
.wph .wph-secondary { background:var(--surface-2); color:var(--text); }
.wph .wph-advance { display:grid; grid-template-columns:1fr 1.5fr; gap:30px; }
.wph #wph-bank { scroll-margin-top:110px; }
@media (max-width:760px) { .wph { padding:36px 18px; } .wph .wph-layout, .wph ol, .wph .wph-advance { grid-template-columns:minmax(0,1fr); } .wph .wph-card { padding:22px; } .wph ol { gap:18px; } }
@media (max-width:380px) { .wph { padding:30px 12px; } .wph .wph-card { padding:18px; } .wph .wph-actions a { width:100%; } }