checkout-body {
      background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
      font-family: 'Inter', Arial, sans-serif;
      min-height: 100vh;
      margin: 20;
      padding: 10;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .checkout-card {
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(8px);
      box-shadow: 0 20px 60px rgba(70,120,220,0.13), 0 2px 8px rgba(0,30,85,0.04);
      border-radius: 24px;
      padding: 60px 60px 60px 60px;
      max-width: 700px;
      width: 100%;
      margin: auto;
      position: relative;
      animation: cardEnter 0.7s ease;
      
    }

    @keyframes cardEnter {
      from { 
        opacity: 0; 
        transform: translateY(20px) scale(0.98); 
      }
      to { 
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .icon {
      width: 54px;
      height: 54px;
      background: #040a08;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: 50%;
      top: -27px;
      transform: translateX(-50%);
      box-shadow: 0 3px 15px rgba(67,153,225,0.12);
    }
    .icon svg {
      width: 34px;
      height: 34px;
      color: #fff;
    }

    h2 {
      text-align: center;
      color: #22223B;
      margin-bottom: 30px;
      font-weight: 600;
      font-size: 1.67em;
      letter-spacing: -1px;
    }
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 800;
      color: #3e4a5e;
      font-size: 1em;
      margin-left: 10px;
    }
    input, select {
      width: 100%;
      padding: 12px 14px;
      margin-bottom: 18px;
      border: 1.5px solid #c7d2fe;
      border-radius: 9px;
      font-size: 15px;
      background: #f8fafd;
      transition: border-color 0.2s, box-shadow 0.2s;
      box-shadow: 0 1px 2px rgba(120,120,120,0.03);
      outline: none;
    }
    input:focus, select:focus {
      border-color: #5676ff;
      box-shadow: 0 0 0 2px #e0e7ff;
      background: #f4f8fe;
    }
    
    #rzp-button
    {
      background: #040a08;
      color: #fff;
      padding: 13px 0;
      width: 100%;
      border: none;
      border-radius: 9px;
      font-size: 1.08em;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 1.5px 8px rgba(66,153,225,0.12);
      transition: background 0.22s, transform 0.15s;
      letter-spacing: 0.2px;
      margin-top: 6px;
      margin-bottom: 6px;
    }
    #rzp-button:hover, #rzp-button:focus {
      background: linear-gradient(90deg, #FF931E, #F25E56);
      transform: translateY(-1.5px) scale(1.03);
    }
    .credit {
      text-align: center;
      font-size: 13px;
      color: #708090;
      margin-top: 13px;
      opacity: 0.76;
    }
    @media (max-width: 550px) {
      .checkout-card { 
        padding: 45px 15px 15px 15px; 
        max-width: 97vw;
        margin:auto;
      }
      .icon { top: -27px; left: 50%; }
      h2 { font-size: 1.15em; }
    }