/* UPI QR generator page */
.upi{max-width:1100px;margin:0 auto;padding:8px 0 40px}
.upi-hero{text-align:center;max-width:680px;margin:6px auto 30px}
.upi-eyebrow{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--brand,#4285f4) 12%,transparent);color:var(--brand,#4285f4);font-weight:700;font-size:.82rem}
.upi-hero h1{margin:14px 0 8px;font-size:clamp(1.9rem,4.5vw,2.8rem);line-height:1.1}
.upi-hero p{margin:0;color:var(--muted,#667085);font-size:1.05rem;line-height:1.55}
.upi-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:26px;align-items:start}
.upi-form{padding:26px;display:grid;gap:4px}
.upi-step{display:flex;align-items:center;gap:10px;margin:14px 0 6px;font-weight:800}
.upi-step:first-child{margin-top:0}
.upi-step b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;color:#fff;background:var(--brand,#4285f4)}
.upi-form .field{margin-bottom:12px}
.upi-form label em{font-style:normal;font-weight:600;font-size:.74rem;color:var(--muted,#667085);margin-left:6px;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--text,#1f2937) 7%,transparent)}
.upi-count{float:right;font-weight:600;font-size:.78rem;color:var(--muted,#667085)}
.upi-money{display:flex;align-items:center;border:1px solid var(--border,#e2e8f3);border-radius:var(--radius,14px);background:var(--input-bg,#f5f4f2);overflow:hidden}
.upi-money:focus-within{border-color:var(--brand,#4285f4);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand,#4285f4) 18%,transparent)}
.upi-money span{padding:0 4px 0 16px;font-weight:800;font-size:1.1rem;color:var(--muted,#667085)}
.upi-money input{border:0!important;box-shadow:none!important;background:transparent!important;flex:1}
.upi-handles,.upi-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.upi-handles button,.upi-quick button{padding:6px 12px;border-radius:999px;border:1px solid var(--border,#e2e8f3);background:var(--card,#fff);color:inherit;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:transform .12s,border-color .12s}
.upi-handles button:hover,.upi-quick button:hover{border-color:var(--brand,#4285f4);color:var(--brand,#4285f4);transform:translateY(-1px)}
.upi-quick .upi-clear{border-style:dashed;color:var(--muted,#667085)}
.upi-err{margin:6px 2px 0;color:#c5221f;font-size:.84rem;font-weight:600}
.upi-themes{display:flex;flex-wrap:wrap;gap:10px;margin:2px 0 8px}
.upi-themes button{width:40px;height:40px;border-radius:50%;border:3px solid var(--card,#fff);background:var(--c);box-shadow:0 0 0 1px var(--border,#d5dbe8);color:transparent;cursor:pointer;display:grid;place-items:center;transition:transform .12s}
.upi-themes button:hover{transform:scale(1.08)}
.upi-themes button.is-on{color:#fff;box-shadow:0 0 0 2px var(--c)}
.upi-privacy{display:flex;align-items:center;gap:8px;margin:14px 0 0;padding:10px 14px;border-radius:14px;background:color-mix(in srgb,#22c55e 12%,transparent);font-size:.86rem;color:var(--text,#1f2937)}
.upi-side{position:sticky;top:90px;display:grid;gap:16px}
.upi-preview{position:relative;max-width:440px;margin:0 auto;width:100%;border-radius:34px;box-shadow:0 30px 60px -30px rgba(15,23,42,.45),0 0 0 1px rgba(15,23,42,.06);background:#fff;overflow:hidden}
.upi-preview canvas{display:block;width:100%;height:auto}
.upi-hint{position:absolute;left:14px;right:14px;bottom:78px;margin:0;display:flex;gap:8px;align-items:center;justify-content:center;padding:8px 12px;border-radius:12px;background:rgba(15,23,42,.82);color:#fff;font-size:.82rem;font-weight:600}
.upi-hint[hidden]{display:none}
.upi-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.upi-actions .btn{display:inline-flex;align-items:center;gap:8px}
.upi-actions .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
@media (hover:hover) and (pointer:fine){.upi-open{display:none!important}}
.upi-link{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:0;font-size:.8rem;color:var(--muted,#667085)}
.upi-link code{max-width:100%;overflow-wrap:anywhere;padding:6px 10px;border-radius:10px;background:color-mix(in srgb,var(--text,#1f2937) 7%,transparent)}
.upi-how{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:40px 0 28px}
.upi-how>div{padding:20px;border-radius:20px;border:1px solid var(--border,#e2e8f3);background:var(--card,#fff)}
.upi-how b{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:14px;background:color-mix(in srgb,var(--brand,#4285f4) 12%,transparent);color:var(--brand,#4285f4)}
.upi-how h3{margin:12px 0 4px}.upi-how p{margin:0;color:var(--muted,#667085);font-size:.92rem;line-height:1.5}
.upi-faq{padding:24px}.upi-faq h2{margin:0 0 12px}
.upi-faq details{border-top:1px solid var(--border,#e2e8f3);padding:12px 2px}
.upi-faq summary{cursor:pointer;font-weight:700}
.upi-faq details p{margin:8px 0 0;color:var(--muted,#667085);line-height:1.6}
.upi-more{margin:14px 0 0;color:var(--muted,#667085)}
@media(max-width:860px){.upi-grid{grid-template-columns:1fr}.upi-side{position:static;order:-1}.upi-how{grid-template-columns:1fr}.upi-form{padding:18px}}
@media print{body *{visibility:hidden}.upi-preview,.upi-preview *{visibility:visible}.upi-preview{position:fixed;left:50%;top:20px;transform:translateX(-50%);width:520px;box-shadow:none}.upi-hint{display:none}}