@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  color-scheme: light;
  --bg-main: #f5f8ff;
  --bg-deep: #07111f;
  --surface: rgba(255, 255, 255, 0.86);
  --surface-solid: #ffffff;
  --surface-soft: #f8fbff;
  --surface-tint: #eef6ff;
  --ink: #0a1220;
  --ink-soft: #334155;
  --muted: #64748b;
  --faint: #94a3b8;
  --line: rgba(148, 163, 184, 0.24);
  --line-strong: rgba(15, 23, 42, 0.1);
  --primary: #0f66ff;
  --primary-2: #00b4d8;
  --primary-dark: #083ea2;
  --emerald: #10b981;
  --amber: #f59e0b;
  --rose: #ef4444;
  --violet: #7c3aed;
  --cyan: #0891b2;
  --shadow-sm: 0 8px 22px rgba(15, 23, 42, 0.08);
  --shadow: 0 18px 50px rgba(15, 23, 42, 0.13);
  --shadow-xl: 0 30px 80px rgba(7, 17, 31, 0.18);
  --glow-blue: 0 16px 42px rgba(15, 102, 255, 0.24);
  --radius-2xl: 30px;
  --radius-xl: 24px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { min-height: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 0%, rgba(0, 180, 216, 0.18), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(15, 102, 255, 0.18), transparent 28%),
    linear-gradient(180deg, #f9fbff 0%, #eef5ff 46%, #f8fbff 100%);
  letter-spacing: -0.015em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.02) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}
body.browser-pay-page {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.app-shell {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  min-height: 100vh;
  padding: max(18px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
  position: relative;
  z-index: 1;
}
.browser-pay-shell {
  height: 100dvh;
  min-height: 100dvh;
  overflow-y: auto;
  scrollbar-width: none;
}
.browser-pay-shell::-webkit-scrollbar { display: none; }

.screen { display: flex; flex-direction: column; gap: 16px; animation: enter 0.42s cubic-bezier(.16, 1, .3, 1); }
.screen.compact { gap: 13px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.button-grid { display: flex; flex-direction: column; gap: 12px; }
.hidden { display: none !important; }

.card, .hero, .pay-header, .summary-list, .detail-list {
  position: relative;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px);
  overflow: hidden;
}
.card::after, .hero::after, .pay-header::after, .summary-list::after, .detail-list::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}
.hero { padding: 22px; text-align: left; display: flex; flex-direction: column; }
.card { padding: 18px; }
.card.compact-details { padding: 12px 18px; }
.metric-card { min-height: 128px; }

h1 { font-size: clamp(28px, 7vw, 38px); line-height: 0.98; font-weight: 900; letter-spacing: -0.055em; color: var(--ink); }
h2 { font-size: 22px; line-height: 1.12; font-weight: 850; letter-spacing: -0.035em; }
h3 { font-size: 16px; font-weight: 800; }
p { line-height: 1.55; }
.muted { color: var(--muted); font-size: 14px; line-height: 1.5; }
.accent-text { color: var(--primary); }

.brand-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo-mark, .icon-bubble, .meta-icon {
  width: 48px; height: 48px; border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  box-shadow: var(--glow-blue);
}
.icon-bubble { width: 60px; height: 60px; border-radius: 22px; }
.logo-mark svg, .icon-bubble svg, .meta-icon svg { width: 24px; height: 24px; }
.brand-kicker { font-size: 11px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.brand-title { font-size: 16px; font-weight: 900; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 30px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  color: #075985;
  background: linear-gradient(180deg, rgba(236, 253, 245, .95), rgba(224, 242, 254, .88));
  border: 1px solid rgba(14, 165, 233, .18);
  box-shadow: 0 8px 20px rgba(14, 165, 233, .08);
  white-space: nowrap;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 4px rgba(16,185,129,.12); }

.hero-title-zone { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.hero-art {
  margin-top: 18px;
  border-radius: 26px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(15, 102, 255, 0.96), rgba(0, 180, 216, 0.88)),
    radial-gradient(circle at top right, rgba(255,255,255,.4), transparent 34%);
  color: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hero-art .mini-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.24);
}

.stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 18px; }
.step {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  color: var(--muted);
  background: rgba(248,250,252,.9);
  border: 1px solid var(--line);
}
.step-dot {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900;
  color: var(--muted);
  background: #eaf1fb;
}
.step.active { color: #075985; border-color: rgba(14,165,233,.25); background: rgba(224,242,254,.75); }
.step.active .step-dot { color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: 0 8px 16px rgba(15,102,255,.18); }

label { font-size: 13px; font-weight: 850; color: var(--ink-soft); margin-bottom: -5px; }
.input {
  width: 100%;
  min-height: 56px;
  padding: 16px 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 750;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 22px rgba(15,23,42,.04);
}
.input::placeholder { color: #9aa8ba; font-weight: 600; }
.input:focus { outline: none; border-color: rgba(15,102,255,.45); box-shadow: 0 0 0 5px rgba(15,102,255,.12), 0 12px 28px rgba(15,23,42,.06); transform: translateY(-1px); }

button, .button-link {
  appearance: none;
  border: none;
  width: 100%;
  min-height: 56px;
  border-radius: var(--radius-md);
  padding: 15px 16px;
  font-size: 15px;
  font-weight: 850;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
button svg, .button-link svg { width: 20px; height: 20px; }
button:active, .button-link:active { transform: scale(.975); }
.button-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, #064bd8 46%, var(--primary-2) 140%);
  box-shadow: var(--glow-blue), inset 0 1px 0 rgba(255,255,255,.22);
}
.button-primary:hover { transform: translateY(-1px); box-shadow: 0 20px 50px rgba(15,102,255,.28); }
.button-secondary {
  color: var(--ink);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(100,116,139,.18);
  box-shadow: 0 10px 28px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.88);
}
.button-secondary:hover { transform: translateY(-1px); border-color: rgba(15,102,255,.24); }
.button-soft { color: #075985; background: rgba(224,242,254,.78); border: 1px solid rgba(14,165,233,.18); }
.button-danger { color: #b91c1c; background: rgba(254,242,242,.95); border: 1px solid rgba(248,113,113,.28); }

.pay-header {
  padding: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 8%, rgba(255,255,255,.32), transparent 23%),
    linear-gradient(145deg, #081326 0%, #0d3f9b 52%, #00a8c7 115%);
  border-color: rgba(255,255,255,.2);
  box-shadow: var(--shadow-xl);
}
.pay-header::before {
  content: "";
  position: absolute;
  inset: auto -24px -80px -24px;
  height: 150px;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 60%);
}
.pay-header .muted, .pay-header .pay-merchant { color: rgba(255,255,255,.72); }
.pay-merchant { font-size: 14px; font-weight: 700; }
.pay-merchant strong { color: #fff; }
.pay-amount { font-size: clamp(42px, 13vw, 58px); font-weight: 950; color: #fff; line-height: .95; letter-spacing: -.065em; text-shadow: 0 10px 30px rgba(0,0,0,.18); }
.pay-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; position: relative; z-index: 1; }
.pay-lock { width: 46px; height: 46px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24); color: #fff; }
.pay-lock svg { width: 22px; height: 22px; }
.pay-main { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

.upi-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; }
.upi-section-title strong { font-size: 15px; font-weight: 900; }
.upi-section-title span { font-size: 12px; color: var(--muted); font-weight: 700; }
.upi-btn-content { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; }
.upi-btn-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.app-icon-wrapper {
  width: 46px; height: 46px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
  overflow: hidden;
}
.app-icon-wrapper svg { width: 31px; height: 31px; }
.upi-btn-labels { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.upi-btn-labels span { font-size: 16px; font-weight: 900; color: var(--ink); }
.upi-btn-labels small { font-size: 12px; font-weight: 750; color: var(--muted); }
.upi-btn-chevron { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary); background: rgba(15,102,255,.08); font-size: 26px; line-height: 1; transition: transform .2s ease, background .2s ease; }
.button-link:hover .upi-btn-chevron { transform: translateX(3px); background: rgba(15,102,255,.13); }

.package-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.package-card {
  position: relative;
  padding: 18px 14px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(100,116,139,.18);
  background: rgba(255,255,255,.88);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  overflow: hidden;
}
.package-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top, rgba(15,102,255,.10), transparent 48%); opacity: 0; transition: opacity .18s ease; }
.package-card:hover { transform: translateY(-2px); border-color: rgba(15,102,255,.26); }
.package-card.active { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,246,255,.94)); border-color: rgba(15,102,255,.48); box-shadow: var(--glow-blue); }
.package-card.active::before { opacity: 1; }
.package-stars { position: relative; font-size: 21px; font-weight: 950; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--ink); }
.package-stars svg { width: 21px; height: 21px; color: #f59e0b; filter: drop-shadow(0 6px 10px rgba(245,158,11,.25)); }
.package-price { position: relative; font-size: 14px; font-weight: 850; color: var(--muted); }
.package-card.active .package-price { color: var(--primary); }

.summary-list, .detail-list { display: flex; flex-direction: column; padding: 8px 18px; }
.summary-item, .detail-item { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(148,163,184,.16); font-size: 14px; }
.summary-item:last-child, .detail-item:last-child { border-bottom: none; }
.summary-item span, .detail-item span { color: var(--muted); font-weight: 750; }
.summary-item strong, .detail-item strong { font-weight: 900; color: var(--ink); text-align: right; word-break: break-word; }

.status-pill { padding: 8px 12px; border-radius: 999px; font-size: 11px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; }
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-pill.pending { background: #fff7ed; color: #c2410c; }
.status-pill.paid, .status-pill.delivering { background: #e0f2fe; color: #0369a1; }
.status-pill.delivered { background: #dcfce7; color: #047857; }
.status-pill.failed, .status-pill.expired, .status-pill.cancelled { background: #fee2e2; color: #b91c1c; }
.pay-header .status-pill { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.26); }

.note { padding: 14px 16px; border-radius: var(--radius-md); font-size: 13px; line-height: 1.45; font-weight: 750; text-align: center; background: rgba(236,253,245,.9); color: #047857; border: 1px solid rgba(16,185,129,.2); box-shadow: 0 10px 24px rgba(16,185,129,.08); }
.trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.trust-item { min-height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 10px 6px; border-radius: 18px; background: rgba(255,255,255,.72); border: 1px solid rgba(148,163,184,.16); color: var(--muted); font-size: 11px; font-weight: 800; }
.trust-item svg { width: 18px; height: 18px; color: var(--primary); }

.spinner { width: 42px; height: 42px; border: 3px solid rgba(15,102,255,.14); border-top-color: var(--primary); border-radius: 50%; animation: spin .75s cubic-bezier(.5,.1,.4,.9) infinite; }
.order-list { display: flex; flex-direction: column; gap: 12px; }
.order-list-item { cursor: pointer; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; transition: transform .18s ease, border-color .18s ease; }
.order-list-item:hover { transform: translateY(-1px); }
.order-list-item .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.success-burst {
  width: 84px; height: 84px; border-radius: 30px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--emerald), #22c55e);
  box-shadow: 0 20px 48px rgba(16,185,129,.28);
  margin-bottom: 14px;
}
.success-burst svg { width: 38px; height: 38px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes enter { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.floaty { animation: floaty 3.4s ease-in-out infinite; }

@media (min-width: 720px) {
  .app-shell { max-width: 540px; padding-top: 32px; }
  .hero, .card { padding: 24px; }
}


/* v8 final payment-page polish: modern premium checkout + exact UXWing PNG logos */
body.browser-pay-page {
  background:
    radial-gradient(circle at 18% -10%, rgba(59, 130, 246, .22), transparent 34%),
    radial-gradient(circle at 105% 8%, rgba(14, 165, 233, .18), transparent 36%),
    linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%) !important;
}
.browser-pay-shell {
  max-width: 460px !important;
  padding: 14px 14px max(20px, env(safe-area-inset-bottom)) !important;
}
.v8-payment-screen { gap: 12px !important; }
.v8-payment-screen .card,
.v8-payment-screen .pay-header {
  border-radius: 26px !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow: 0 20px 55px rgba(15,23,42,.10) !important;
}
.v8-pay-header {
  padding: 18px !important;
  min-height: 178px;
  background:
    radial-gradient(circle at 86% 0%, rgba(255,255,255,.36), transparent 24%),
    radial-gradient(circle at 8% 110%, rgba(45,212,191,.26), transparent 30%),
    linear-gradient(145deg, #07152d 0%, #0f3f9d 54%, #06b6d4 122%) !important;
  overflow: hidden !important;
}
.v8-pay-header::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  pointer-events: none;
}
.v8-pay-header .pay-merchant span,
.v8-pay-header .amount-caption { display: block; color: rgba(255,255,255,.64); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.v8-pay-header .pay-merchant strong { display: block; margin-top: 4px; color: #fff; font-size: 16px; font-weight: 950; letter-spacing: -.02em; }
.v8-pay-header .pay-amount { font-size: clamp(46px, 13vw, 60px) !important; letter-spacing: -.075em !important; margin-top: 2px; }
.v8-status-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v8-countdown { width: fit-content; padding: 8px 11px; border-radius: 999px; color: rgba(255,255,255,.86); background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18); font-size: 11px; font-weight: 900; }
.v8-recipient-card { display: grid !important; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; padding: 15px !important; background: linear-gradient(180deg,#ffffff,#f8fbff) !important; }
.v8-recipient-icon { width: 54px; height: 54px; border-radius: 20px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg,#0f66ff,#06b6d4); box-shadow: 0 12px 28px rgba(15,102,255,.22); }
.v8-recipient-icon svg { width: 24px; height: 24px; }
.v8-recipient-copy span { color: #64748b; font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }
.v8-recipient-copy strong { display: block; margin-top: 2px; color: #07142c; font-size: 24px; line-height: 1.05; font-weight: 1000; letter-spacing: -.045em; word-break: break-word; }
.v8-recipient-copy p { margin-top: 4px; color: #64748b; font-size: 12px; font-weight: 760; line-height: 1.35; }
.v8-risk-card { padding: 14px !important; background: linear-gradient(180deg,#fffbeb,#ffffff) !important; border-color: rgba(245,158,11,.25) !important; }
.v8-risk-line { display: flex; gap: 10px; align-items: flex-start; }
.v8-risk-line > div { width: 34px; height: 34px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; color: #b45309; background: rgba(245,158,11,.14); }
.v8-risk-line svg { width: 18px; height: 18px; }
.v8-risk-line p { color: #78350f; font-size: 13px; line-height: 1.38; font-weight: 750; margin: 0; }
.v8-risk-check { margin: 10px 0 0 !important; padding: 11px 12px; border-radius: 16px; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.78); border: 1px solid rgba(245,158,11,.20); color: #78350f; font-size: 13px; line-height: 1.35; font-weight: 850; cursor: pointer; }
.v8-risk-check input, .v8-modal-check input { appearance: none; width: 22px; height: 22px; min-width: 22px; border-radius: 8px; border: 2px solid rgba(100,116,139,.38); background: #fff; position: relative; margin: 0; }
.v8-risk-check input:checked, .v8-modal-check input:checked { background: #0f66ff; border-color: #0f66ff; }
.v8-risk-check input:checked::after, .v8-modal-check input:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.v8-upi-card { padding: 14px !important; background: rgba(255,255,255,.86) !important; }
.v8-section-title { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px; }
.v8-section-title strong { color: #07142c; font-size: 15px; font-weight: 950; letter-spacing: -.02em; }
.v8-section-title span { color: #64748b; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.v8-upi-button { min-height: 64px !important; padding: 10px 12px !important; border-radius: 20px !important; background: #fff !important; border: 1px solid rgba(148,163,184,.18) !important; box-shadow: 0 10px 26px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.92) !important; }
.v8-upi-button:hover { border-color: rgba(15,102,255,.25) !important; transform: translateY(-1px); }
.v8-upi-button.is-disabled, .v8-upi-button:disabled { opacity: .48 !important; cursor: not-allowed !important; transform: none !important; }
.v8-upi-button .upi-btn-left { gap: 12px !important; align-items: center !important; }
.v8-pay-logo { width: 46px !important; height: 46px !important; min-width: 46px !important; border-radius: 16px !important; display: grid !important; place-items: center !important; overflow: hidden !important; background: #fff !important; border: 1px solid rgba(15,23,42,.08) !important; box-shadow: 0 8px 18px rgba(15,23,42,.075) !important; }
.v8-pay-logo img { display: block !important; max-width: 30px !important; max-height: 30px !important; width: auto !important; height: auto !important; object-fit: contain !important; }
.v8-pay-logo span { font-size: 9px; font-weight: 1000; color: #0f172a; letter-spacing: -.04em; }
.v8-logo-gpay img { max-width: 32px !important; max-height: 32px !important; }
.v8-logo-phonepe { background: #5f259f !important; }
.v8-logo-phonepe img { max-width: 30px !important; max-height: 30px !important; }
.v8-logo-paytm img { max-width: 32px !important; max-height: 32px !important; }
.v8-logo-upi img { max-width: 31px !important; max-height: 31px !important; }
.v8-upi-button .upi-btn-labels span { color: #07142c !important; font-size: 15px !important; font-weight: 950 !important; }
.v8-upi-button .upi-btn-labels small { color: #64748b !important; font-size: 12px !important; font-weight: 760 !important; }
.v8-upi-button .upi-btn-chevron { width: 30px !important; height: 30px !important; min-width: 30px !important; color: #0f66ff !important; background: #eff6ff !important; }
.v8-details-card { padding: 8px 16px !important; }
.v8-trust-strip { gap: 8px !important; }
.v8-trust-strip .trust-item { min-height: 56px !important; border-radius: 18px !important; background: rgba(255,255,255,.75) !important; }
.v8-refresh { margin-top: 0 !important; border-radius: 20px !important; }
.v8-modal-backdrop { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: flex-end; justify-content: center; padding: 14px; background: rgba(2,6,23,.56); backdrop-filter: blur(14px); }
.v8-confirm { width: min(100%, 430px); max-height: calc(100dvh - 28px); overflow: auto; padding: 16px; border-radius: 28px; background: linear-gradient(180deg,#fff,#f8fbff); border: 1px solid rgba(255,255,255,.86); box-shadow: 0 30px 90px rgba(2,6,23,.34); }
.v8-confirm-top { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(148,163,184,.18); }
.v8-confirm-icon { width: 42px; height: 42px; border-radius: 16px; display: grid; place-items: center; color: #0f66ff; background: #eff6ff; }
.v8-confirm-icon svg { width: 20px; height: 20px; }
.v8-confirm-top span { color: #64748b; font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }
.v8-confirm h2 { margin: 2px 0 0; color: #07142c; font-size: 20px; line-height: 1.08; font-weight: 1000; letter-spacing: -.04em; }
.v8-confirm-step { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.v8-confirm-fact { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; border-radius: 17px; background: #f8fafc; border: 1px solid rgba(148,163,184,.16); }
.v8-confirm-fact span { color: #64748b; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.v8-confirm-fact strong { color: #07142c; font-size: 14px; font-weight: 1000; text-align: right; }
.v8-confirm-note { padding: 12px; border-radius: 17px; color: #92400e; background: #fffbeb; border: 1px solid rgba(245,158,11,.24); font-size: 13px; font-weight: 850; }
.v8-final-user { padding: 16px; border-radius: 20px; color: #1e3a8a; background: linear-gradient(180deg,#eff6ff,#fff); border: 1px solid rgba(37,99,235,.18); text-align: center; }
.v8-final-user span { display: block; color: #64748b; font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }
.v8-final-user strong { display: block; margin-top: 4px; color: #0f66ff; font-size: 25px; line-height: 1.08; font-weight: 1000; letter-spacing: -.05em; word-break: break-word; }
.v8-modal-check { display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 12px; border-radius: 17px; background: #fff; border: 1px solid rgba(148,163,184,.20); color: #334155; font-size: 13px; font-weight: 850; cursor: pointer; }
.v8-confirm-actions { display: grid; grid-template-columns: .9fr 1.1fr; gap: 10px; }
.v8-confirm-actions button { min-height: 52px !important; border-radius: 17px !important; }
.v8-confirm-actions button:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }
@media (min-width: 520px) { .v8-modal-backdrop { align-items: center; } }
@media (max-width: 370px) {
  .browser-pay-shell { padding-left: 10px !important; padding-right: 10px !important; }
  .v8-pay-logo { width: 42px !important; height: 42px !important; min-width: 42px !important; border-radius: 14px !important; }
  .v8-pay-logo img { max-width: 27px !important; max-height: 27px !important; }
  .v8-recipient-copy strong { font-size: 20px !important; }
  .v8-upi-button { min-height: 60px !important; }
  .v8-confirm-actions { grid-template-columns: 1fr; }
}