.pay-card{
      max-width: 980px;
      margin: 0 auto;
      background:#fff;
      border-radius: 22px;
      overflow: hidden;
      box-shadow: 0 15px 45px rgba(16,24,40,.12);
      position: relative;
    }

    /* LEFT PANEL */
    .left-panel{
      background:#6b79d7;
      color:#fff;
      padding: 28px;
      min-height: 340px;
      position: relative;
      overflow:hidden;
    }

    .left-panel:after{
      content:"";
      position:absolute;
      width: 170%;
      height: 230px;
      left: -40%;
      bottom: -120px;
      background:#fff;
      transform: rotate(-10deg);
      border-radius: 50px;
      opacity:.96;
    }

    .brand-title{
      position: relative;
      z-index: 2;
     
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .8px;
      font-size: 34px;
      line-height: 1.12;
    }

    .qr-box{
      position: relative;
      z-index: 2;
      margin-top: 18px;
      width: 220px;
      height: 220px;
      background:#fff;
      border-radius: 18px;
      border:1px solid #edf0f6;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow: 0 12px 30px rgba(0,0,0,.10);
    }

    #qrcode canvas,#qrcode img{
      width: 180px !important;
      height: 180px !important;
    }

    /* RIGHT PANEL */
    .right-panel{
      padding: 28px;
      min-height: 340px;
      position: relative;
    }

    .powered{
      font-size: 14px;
      font-weight: 700;
      color:#444;
      margin-bottom: 6px;
    }

    .yesbank{
      font-size: 22px;
      font-weight: 900;
      color:#0b4bd4;
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom: 14px;
    }

    .yesbank .check{
      color:#e11b22;
      font-size: 26px;
    }

    /* UPI pill */
    .upi-pill{
      background:#eef2fb;
      border-radius: 60px;
      padding: 12px 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      font-weight: 800;
      color:#6b7280;
      max-width: 700px;
      margin-bottom: 12px;
    }

    .upi-left{
      display:flex;
      align-items:center;
      gap:10px;
      overflow:hidden;
    }

    .gpay{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background:#fff;
      border:1px solid #dde3f3;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight: 900;
      color:#1a73e8;
      flex:0 0 30px;
    }

    .upi-text{
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      max-width: 440px;
    }

    /* Buttons */
    .btn-row{
      display:flex;
      gap:10px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }

    /* Details */
    .drow{
      display:flex;
      gap:14px;
      align-items:flex-start;
      padding: 10px 0;
      border-bottom: 1px solid #f0f2f7;
      max-width: 760px;
    }
    .drow:last-child{ border-bottom:none; }

    .icon{
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background:#eef4ff;
      color:#0b4bd4;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size: 18px;
      flex:0 0 38px;
    }

    .txt{
      font-weight: 650;
      color:#2f3342;
      font-size: 16px;
      line-height: 1.35;
      text-decoration:none;
    }

    .txt:hover{
      color:#0b4bd4;
    }

    /* Footer strip */
    .footer-strip{
      position:absolute;
      left:0;
      bottom:0;
      width:100%;
      height: 16px;
      display:flex;
    }
    .footer-strip .red{background:#e11b22;width:32%;}
    .footer-strip .white{background:#fff;width:10%;}
    .footer-strip .blue{background:#0b4bd4;width:58%;}

    /* Responsive */
    @media(max-width: 991px){
      .brand-title{ font-size: 28px; text-align:center; }
      .qr-box{ margin-left:auto; margin-right:auto; }
      .left-panel:after{ display:none; }
    }

    @media(max-width: 576px){
      .right-panel{ padding: 20px; }
      .left-panel{ padding: 20px; }
      .upi-text{ max-width: 220px; }
    }