/* UPI Gateway — professional payment UI (mobile-first, desktop friendly) */
:root{
  --bg:#edf0f6; --card:#ffffff; --ink:#0f172a; --muted:#64748b; --faint:#94a3b8;
  --line:#e6eaf2; --blue:#2d69f6; --blue-dark:#1d4ed8; --blue-soft:#eaf0fe;
  --green:#16a34a; --green-soft:#e7f7ee; --red:#dc2626; --red-soft:#fdeeee;
  --amber:#d97706; --amber-soft:#fdf3e3; --radius:20px;
  --shadow:0 18px 50px -18px rgba(15,23,42,.22), 0 2px 6px rgba(15,23,42,.05);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  background:
    radial-gradient(900px 420px at 50% -120px, rgba(45,105,246,.10), transparent 60%),
    var(--bg);
  color:var(--ink); min-height:100vh;
  display:flex; align-items:flex-start; justify-content:center;
  padding:28px 16px 40px;
}
.page{width:100%; max-width:440px; animation:rise .45s ease both;}
@keyframes rise{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px 24px 24px;
}
.brand{
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--faint); text-align:center; margin-bottom:18px;
}

/* merchant header */
.merchant{display:flex; align-items:center; gap:12px; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:18px;}
.avatar{
  width:46px; height:46px; border-radius:14px; flex:none;
  background:linear-gradient(135deg,#2d69f6,#6d9bff);
  color:#fff; font-weight:800; font-size:20px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px -6px rgba(45,105,246,.55);
}
.mname{font-size:15.5px; font-weight:700;}
.msub{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:5px; margin-top:2px;}
.msub svg{width:12px; height:12px; stroke:var(--green);}

/* steps */
.steps{display:flex; align-items:center; margin:0 0 20px; padding:0; list-style:none;}
.steps li{flex:1; display:flex; align-items:center; font-size:11px; font-weight:600; color:var(--faint);}
.steps li .dot{
  width:22px; height:22px; border-radius:50%; flex:none;
  border:2px solid var(--line); color:var(--faint); background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:11px; margin-right:7px;
}
.steps li.on{color:var(--blue);}
.steps li.on .dot{border-color:var(--blue); color:var(--blue); background:var(--blue-soft);}
.steps li.done{color:var(--green);}
.steps li.done .dot{border-color:var(--green); background:var(--green); color:#fff;}
.steps li:not(:last-child)::after{content:''; flex:1; height:2px; background:var(--line); margin:0 8px; border-radius:2px;}
.steps li.done:not(:last-child)::after{background:var(--green);}

/* amount block */
.amount-wrap{text-align:center; margin-bottom:18px;}
.amount{font-size:38px; font-weight:800; letter-spacing:-.02em;}
.meta{font-size:12.5px; color:var(--muted); margin-top:8px; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;}
.meta code{font-family:ui-monospace,Menlo,monospace; background:#f1f5f9; padding:2px 7px; border-radius:6px; font-size:11.5px; color:#334155;}
.timer{
  display:inline-flex; align-items:center; gap:5px; font-weight:700; font-variant-numeric:tabular-nums;
  background:var(--blue-soft); color:var(--blue-dark); padding:3px 10px; border-radius:999px; font-size:12px;
}
.timer.danger{background:var(--red-soft); color:var(--red);}
.timer svg{width:12px; height:12px;}
.note-box{
  margin:12px auto 0; max-width:320px; font-size:12.5px; color:#475569;
  background:#f8fafc; border:1px solid var(--line); border-radius:10px; padding:8px 12px;
}

/* QR */
.qr-box{
  border:1.5px dashed #c7d6f8; background:linear-gradient(180deg,#fbfcff,#f4f7ff);
  border-radius:16px; padding:20px; display:flex; justify-content:center; margin-bottom:8px;
}
#qrcode img, #qrcode table{display:block; margin:0 auto; border-radius:6px;}
.hint{text-align:center; font-size:12.5px; color:var(--muted); margin:10px 0 14px;}

/* buttons */
.btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; min-height:52px; padding:0 18px; border:0; border-radius:14px;
  font-size:15px; font-weight:700; font-family:inherit; cursor:pointer;
  text-decoration:none; transition:transform .08s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:active{transform:scale(.985);}
.btn:disabled{opacity:.6; cursor:wait; transform:none;}
.btn-primary{background:linear-gradient(180deg,#3b7bf7,#1d4ed8); color:#fff; box-shadow:0 10px 22px -10px rgba(45,105,246,.7);}
.btn-primary:hover{filter:brightness(1.05);}
.btn-upi{background:#0f172a; color:#fff; box-shadow:0 10px 22px -12px rgba(15,23,42,.6);}
.btn-upi:hover{filter:brightness(1.12);}
.btn svg{width:18px; height:18px;}

.divider{display:flex; align-items:center; gap:12px; margin:18px 0 14px; color:var(--faint); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;}
.divider::before,.divider::after{content:''; flex:1; height:1px; background:var(--line);}

/* form */
label{display:block; font-size:13px; font-weight:600; margin:14px 0 7px; color:#334155; text-align:left;}
label .opt{color:var(--faint); font-weight:500;}
input{
  width:100%; height:52px; padding:0 15px; font-size:16px; font-family:inherit;
  border:1.5px solid var(--line); border-radius:12px; background:#fbfcfe; color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(45,105,246,.14); background:#fff;}
input::placeholder{color:#b6bfcc;}
.err{color:var(--red); font-size:13px; font-weight:600; min-height:20px; margin:8px 0 4px; text-align:left;}
.fine{font-size:12px; color:var(--muted); text-align:center; margin:12px 0 0; line-height:1.55;}
#submit{margin-top:10px;}

/* status views */
.status{text-align:center; padding:8px 0 4px;}
.status h1{font-size:21px; margin:16px 0 8px; letter-spacing:-.01em;}
.status .sub{font-size:14px; color:var(--muted); line-height:1.6; margin:0 0 6px;}
.status .big-amount{font-size:30px; font-weight:800; margin:10px 0 2px;}
.badge{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  padding:6px 13px; border-radius:999px; margin-top:10px;
}
.badge.ok{background:var(--green-soft); color:var(--green);}
.badge.warn{background:var(--amber-soft); color:var(--amber);}
.badge.err{background:var(--red-soft); color:var(--red);}
.orderline{font-size:12px; color:var(--faint); margin-top:14px;}
.orderline code{font-family:ui-monospace,Menlo,monospace;}
.status .btn{margin-top:18px;}

/* animated icons */
.icon-wrap{width:88px; height:88px; margin:6px auto 0; position:relative;}
.icon-wrap .ring{position:absolute; inset:0; border-radius:50%;}
.ring.ok{background:var(--green-soft);}
.ring.err{background:var(--red-soft);}
.ring.warn{background:var(--amber-soft);}
.icon-wrap svg{position:absolute; inset:0; margin:auto; width:44px; height:44px;}
.draw circle{stroke-dasharray:166; stroke-dashoffset:166; animation:draw .7s ease forwards;}
.draw path{stroke-dasharray:60; stroke-dashoffset:60; animation:draw .45s .55s ease forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
.spinner{
  width:64px; height:64px; margin:10px auto 0; border-radius:50%;
  border:5px solid var(--blue-soft); border-top-color:var(--blue);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.pulse{animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(.94); opacity:.75;}}

/* link-required / expired */
.empty{text-align:center; padding:14px 0;}
.empty h1{font-size:20px; margin:14px 0 8px;}
.empty .sub{font-size:14px; color:var(--muted); line-height:1.6;}
.empty .icon-wrap{width:76px; height:76px;}

.powered{text-align:center; font-size:12px; color:var(--faint); margin:18px 0 0; display:flex; align-items:center; justify-content:center; gap:6px;}
.powered svg{width:12px; height:12px;}

@media (max-width:480px){
  /* full-screen app-like checkout on mobile, like Razorpay */
  body{padding:0; display:block; background:#fff;}
  .page{max-width:none; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; animation:none;}
  .card{flex:1; border:0; border-radius:0; box-shadow:none; padding:20px 20px 12px;}
  .brand{margin-bottom:14px;}
  .amount{font-size:34px;}
  .steps li{font-size:10px;}
  .powered{margin:0; background:#fff; padding:12px 16px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line);}
}
@media (min-width:768px){
  body{align-items:center; padding:40px 16px;}
}