:root{
  --bg:#f3f6fb; --card:#ffffff;
  --brand:#0d47a1; --accent:#1683ff; --accent-2:#111827;
  --text:#18212f; --muted:#64748b;
  --ring:rgba(22,131,255,.14);
  --shadow:0 24px 48px rgba(12,21,56,.10);
  --radius:22px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:#f3f6fb; /* flat background to avoid tint bands under cards */
}

/* Remove shared page background tint on payment page only */
main.wrap{ background: transparent !important; }
.wrap{max-width:1100px;margin:0 auto;padding:16px 18px}
.header{
  position:sticky; top:0; z-index:10; background:transparent; backdrop-filter:saturate(120%) blur(6px);
}
.brandbar{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:22px;
}
.brandbar img{height:80px}
.brandbar .title{font-weight:800; font-size:22px; color:var(--brand)}
.brandbar .sub{margin-left:auto; font-size:13px; color:var(--muted)}
.badges{display:flex; gap:6px; align-items:center; margin-left:8px}
.badge{padding:4px 10px; font-size:12px; border-radius:999px; background:#eef5ff; color:#0b4db4}

.grid{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:980px){ .grid{ grid-template-columns:1.15fr .85fr } }

.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:20px;
}
.card h2{margin:0 0 6px; font-size:20px; color:var(--brand)}
.card h2 .icon-h{font-size:20px; margin-right:8px; vertical-align:middle}
.card .muted{color:var(--muted); font-size:14px}

.pay-actions{display:flex; flex-wrap:wrap; gap:12px; margin:12px 0 0}
.btn{
  appearance:none; border:0; border-radius:14px; padding:12px 16px; cursor:pointer;
  font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:transform .06s ease, box-shadow .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent); color:#fff; box-shadow:0 10px 24px rgba(22,131,255,.28)}
.btn.dark{background:var(--accent-2); color:#fff; box-shadow:0 10px 24px rgba(17,24,39,.28)}
.btn.soft{background:#eef5ff; color:#0d47a1}
.icon{width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center}
.btn .icon i{font-size:18px; line-height:1}

.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:#eef5ff; color:#0b4db4; font-size:13px; margin-top:8px}

.inputs{display:grid; gap:10px; grid-template-columns:1fr}
.label{display:block; font-size:13px; color:#334155; margin-bottom:6px}
.input{width:100%; border:1px solid #d3d7df; border-radius:12px; padding:12px 12px;
  background:#fff; outline:none}
.input:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--ring)}

.qr-wrap{display:grid; place-items:center; padding:10px}
.qr{width:260px; height:260px; object-fit:contain; border:1px solid #e5e7eb; border-radius:16px; background:#fff}
.note{font-size:13px; color:#6b7280; text-align:center; margin-top:8px}

/* app-grid removed (no direct app buttons now) */

/* ===== Pay-using row (logos + large number) ===== */
.pay-using{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background:#f7faff; border:1px dashed #d3d7df; border-radius:12px; padding:8px 10px; margin:10px 0 6px;
}
.pay-using .app-logos{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pay-using .app-logos .label{font-size:12px; color:#334155; margin-right:2px}
.pay-using .app-logos img{height:22px; width:auto; display:inline-block}
.pay-using .pay-number{font-weight:800; color:#0d47a1; letter-spacing:0.3px;}
@media (max-width:640px){
  .pay-using{flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:6px;}
  .pay-using .app-logos{justify-content:center}
  .pay-using .app-logos img{height:18px}
  .pay-using .pay-number{font-size:20px; margin-top:2px}
}
@media (min-width:641px){ .pay-using .pay-number{font-size:22px;} }
@media (min-width:980px){ .pay-using .pay-number{font-size:24px;} }

.footer{
  margin-top:auto; /* push to bottom in flex layout */
  display:flex; flex-wrap:wrap; column-gap:12px; row-gap:8px;
  color:#6b7280; font-size:13px; justify-content:center; align-items:center; text-align:center; width:100%; padding:14px 10px 22px;
}
.footer a{color:#0b51c9; text-decoration:none; padding:6px 10px; border-radius:8px; transition: background .18s ease, box-shadow .18s ease}
.footer a:hover, .footer a:focus-visible{ background:rgba(13,71,161,.08); box-shadow:0 0 0 2px rgba(13,71,161,.12); outline:none }

.helper{font-size:12px; color:#6b7280; margin-top:8px}
.hide{display:none !important}


.icon-sm { margin-right: 6px; font-size: 0.95em; vertical-align: middle; }


/* ===== Mobile fixes (<= 640px) ===== */
@media (max-width: 640px){

  /* Header bar: logo + title + badges neatly stack */
  .brandbar{
    padding: 10px 8px;
    gap: 8px;
    flex-wrap: wrap;              /* allow wrap */
  }
  .brandbar img{ height: 60px; }  /* smaller logo */
  .brandbar .title{
    font-size: 22px;
    line-height: 1.1;
  }
  .brandbar .sub{
    order: 3;                     /* move badges to next line */
    width: 100%;
    margin: 2px 0 0 0;
  }
  .badges{ margin-left: 0; gap: 6px; }
  .badge{ padding: 3px 8px; font-size: 11px; }

  /* Cards: full-bleed look with comfy padding */
  .wrap{ padding: 12px; }
  .card{ padding: 14px; border-radius: 14px; }

  /* Inputs & buttons: easier taps */
  .inputs{ gap: 8px; }
  .input{ padding: 12px; font-size: 16px; } /* prevents iOS zoom */
  .pay-actions{ gap: 10px; }
  .pay-actions .btn{ 
    width: 100%;                 /* buttons full width on phone */
    justify-content: center;
  }

  /* Pill & QR spacing */
  .pill{ margin-top: 10px; }
  .qr{ width: 220px; height: 220px; border-radius: 14px; }
  .note, .helper{ font-size: 12px; }

  /* Grid: single column (safety) */
  .grid{ grid-template-columns: 1fr !important; }
}

/* Tablets (640px–980px): balance columns */
@media (min-width: 641px) and (max-width: 979px){
  .wrap{ padding: 16px 18px; }
  .grid{ grid-template-columns: 1fr; gap: 16px; }
  .qr{ width: 240px; height: 240px; }
}

/* Desktop polish */
@media (min-width: 980px){
  .card{ padding: 20px; }
  .btn .icon i{ font-size: 18px; }
}