body{
  background:
    radial-gradient(1200px 400px at top center,#fffaf1 0%,#f3f1ec 45%,#ece9e4 100%);
  font-family:'Poppins',sans-serif;
  color:var(--ink-900);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.header-bar{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(15,23,42,.06);
  height:65px;
  padding:0 20px;
  box-shadow:var(--shadow-sm);
}

.portal-title{
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink-900);
}

.portal-sub{
  font-size:12px;
  color:var(--ink-500);
}
.scheme-card,
.rzp-invoice-card,
.list-card{
  background:linear-gradient(180deg,#fff,#fafafa);
  border-radius:var(--radius-lg);
  border:1px solid rgba(15,23,42,.05);
  box-shadow:var(--shadow-md);
  padding:16px 18px;
}
.rzp-card{
  padding:16px 18px;
  border-radius:var(--radius-md);
  background:linear-gradient(180deg,#ffffff,#fafafa);
  box-shadow:var(--shadow-md);
  border:1px solid rgba(15,23,42,.05);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}

.rzp-card:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-lg);
}
.rzp-invoice-id{
  font-size:.8rem;
  font-weight:600;
  color:var(--ink-900);
}

.rzp-date{
  font-size:.72rem;
  color:var(--ink-500);
}

.rzp-amount{
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:.01em;
}
.rzp-status{
  font-size:.68rem;
  padding:5px 12px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.04em;
}

.rzp-status.paid{
  background:#eafaf1;
  color:#166534;
}

.rzp-status.issued{
  background:#fff7e0;
  color:#92400e;
}

.rzp-status.cancelled{
  background:#fdecec;
  color:#991b1b;
}
.txn-item{
  padding:10px 12px;
  border-radius:var(--radius-sm);
  background:var(--surface-1);
  border:1px solid rgba(15,23,42,.06);
  box-shadow:var(--shadow-sm);
}

.txn-credit{ border-left:3px solid #22c55e; }
.txn-debit{ border-left:3px solid #ef4444; }
.stat-label{
  font-size:.68rem;
  letter-spacing:.12em;
  color:var(--ink-500);
}

.small-muted,
.form-hint{
  color:var(--ink-500);
  line-height:1.5;
}
@media(max-width:640px){
  .rzp-card{
    padding:14px 16px;
  }

  .scheme-card{
    padding:14px 16px;
  }
}
/* Premium pending pill – mobile first */
.stat-value .badge.bg-warning{
  background:#fff7e0 !important;           /* soft amber */
  color:#92400e !important;                /* calm brown */
  border:1px solid #facc15;                /* subtle edge */
  border-radius:999px;
  padding:6px 12px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.02em;
  display:inline-flex;
  align-items:center;
  line-height:1.2;
  white-space:normal;                      /* allows wrap */
  text-align:center;
  max-width:100%;
  box-shadow:0 1px 2px rgba(15,23,42,.06);
}
@media(max-width:480px){
  .stat-value .badge.bg-warning{
    font-size:.68rem;
    padding:5px 10px;
  }
}
/* ===============================
   PREMIUM STATUS PILLS – GLOBAL
   =============================== */

.badge{
  border-radius:999px !important;
  padding:6px 12px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.2;
  display:inline-flex;
  align-items:center;
  white-space:normal;
  box-shadow:0 1px 2px rgba(15,23,42,.06);
}

/* Pending / Issued */
.badge.bg-warning{
  background:#fff7e0 !important;
  color:#92400e !important;
  border:1px solid #facc15;
}

/* Paid / Success */
.badge.bg-success{
  background:#eafaf1 !important;
  color:#166534 !important;
  border:1px solid #86efac;
}

/* Failed / Cancelled */
.badge.bg-danger{
  background:#fdecec !important;
  color:#991b1b !important;
  border:1px solid #fca5a5;
}

/* Neutral / Info */
.badge.bg-secondary{
  background:#f1f5f9 !important;
  color:#334155 !important;
  border:1px solid #cbd5e1;
}

.stat-label{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#64748b;
  margin-bottom:4px;
}

.stat-value{
  font-size:1.05rem;
  font-weight:600;
  color:#0f172a;
  display:flex;
  align-items:center;
  gap:8px;
}

.scheme-card,
.rzp-card,
.rzp-invoice-card,
.list-card,
.txn-item{
  background:linear-gradient(180deg,#ffffff,#fafafa);
  border-radius:16px;
  border:1px solid rgba(15,23,42,.05);
  box-shadow:0 8px 24px rgba(15,23,42,.08);
}

.rzp-card{
  transition:
    transform .18s cubic-bezier(.22,1,.36,1),
    box-shadow .18s cubic-bezier(.22,1,.36,1);
}

.rzp-card:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 36px rgba(15,23,42,.14);
}
.small-muted,
.form-hint,
.rzp-date{
  font-size:.74rem;
  color:#64748b;
  line-height:1.45;
}

.rzp-invoice-id{
  letter-spacing:.01em;
}

@media(max-width:480px){

  .stat-value{
    flex-wrap:wrap;
  }

  .badge{
    font-size:.66rem;
    padding:5px 10px;
  }

  .rzp-amount{
    font-size:1rem;
  }

  .scheme-card,
  .rzp-card{
    padding:14px 16px;
  }
}
button,
.btn{
  border-radius:12px;
  font-weight:600;
  letter-spacing:.01em;
}

.btn:focus,
button:focus{
  box-shadow:none !important;
}

/* ===============================
   BANK-STYLE DEBIT TRANSACTION
   =============================== */

.txn-item.txn-debit{
  background:
    linear-gradient(180deg,#fffafa,#fff5f5);
  border:1px solid rgba(239,68,68,.18);
  box-shadow:0 2px 6px rgba(15,23,42,.05);
  position:relative;
}

/* Left debit indicator (bank-like) */
.txn-item.txn-debit::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:2px;
  background:#ef4444;
}

/* Debit amount emphasis (subtle, not loud) */
.txn-item.txn-debit .txn-amount,
.txn-item.txn-debit strong{
  color:#991b1b;
  font-weight:600;
}

@media(max-width:480px){
  .txn-item.txn-debit{
    padding-left:14px;
  }
}

/* ===============================
   EMPTY STATE – PENDING ENTRIES
   =============================== */

.empty-state{
  background:linear-gradient(180deg,#ffffff,#fafafa);
  border:1px dashed rgba(15,23,42,.15);
  border-radius:14px;
  padding:20px 16px;
  text-align:center;
  color:#475569;
  box-shadow:0 4px 14px rgba(15,23,42,.05);
}

.empty-state-title{
  font-size:.95rem;
  font-weight:600;
  color:#0f172a;
  margin-bottom:4px;
}

.empty-state-sub{
  font-size:.78rem;
  color:#64748b;
}
/* ===============================
   SECTION HEADING – PENDING
   =============================== */

.section-heading{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.section-title{
  font-size:1rem;
  font-weight:700;
  color:#0f172a;
  letter-spacing:.01em;
}

.section-subtle{
  font-size:.72rem;
  color:#92400e;
  background:#fff7e0;
  border:1px solid #facc15;
  padding:4px 10px;
  border-radius:999px;
  font-weight:600;
}
@media(max-width:480px){
  .section-title{
    font-size:.95rem;
  }
}
/* ===============================
   SECTION HEADING – ACTIVITY
   =============================== */

.section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.section-title{
  font-size:1rem;
  font-weight:700;
  color:#0f172a;
  letter-spacing:.01em;
}

.section-caption{
  font-size:.72rem;
  color:#64748b;
}
@media(max-width:480px){
  .section-title{
    font-size:.95rem;
  }
}
@media(max-width:480px){
  .notice-box{
    background:transparent;                 /* remove card feel */
    border-left:3px solid #facc15;           /* inline disclosure style */
    border-radius:0;
    border-top:none;
    border-right:none;
    border-bottom:none;
    padding:6px 0 6px 10px;
    font-size:.72rem;
    box-shadow:none;
  }
}

.notice-box{
  background:#fffaf0;
  border:1px solid #fde68a;
  border-radius:12px;
  padding:12px 14px;
  font-size:.78rem;
  color:#92400e;
  line-height:1.55;
  box-shadow:0 2px 6px rgba(15,23,42,.05);
}
/* Desktop: full text */
.notice-short{ display:none; }
.notice-full{ display:inline; }

/* Mobile: short text only */
@media(max-width:480px){
  .notice-short{ display:inline; }
  .notice-full{ display:none; }
}

@media(max-width:480px){
  .notice-box{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}

/* ===============================
   MAIN SCHEME ACCOUNT HEADER
   =============================== */

.scheme-header{
  background:linear-gradient(180deg,#ffffff,#fafafa);
  border:1px solid rgba(15,23,42,.06);
  border-radius:18px;
  padding:18px 20px;
  box-shadow:0 10px 28px rgba(15,23,42,.08);
  display:flex;
  flex-direction:column;
  gap:4px;

  /* Desktop behavior */
  width:fit-content;        /* important */
  max-width:100%;
  margin-left:auto;         /* push to right */
  margin-right:0;
  text-align:left;
}

/* Title */
.scheme-title{
  font-size:1.15rem;
  font-weight:700;
  color:#0f172a;
  letter-spacing:.01em;
}

/* Subtitle */
.scheme-subtitle{
  font-size:.78rem;
  color:#64748b;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* ===============================
   MOBILE – CENTER THE CARD
   =============================== */

@media(max-width:480px){
  .scheme-header{
    width:92%;
    margin:0 auto;          /* center */
    text-align:center;
    align-items:center;
    padding:16px;
  }

  .scheme-title{
    font-size:1.05rem;
  }

  .scheme-subtitle{
    margin-top:2px;
  }
}
.btn-gold-main{
  background:linear-gradient(180deg,#f5b300,#e0a800);
  color:#1f2937;
  border:none;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(245,179,0,.35);
}

.btn-gold-main:hover{
  background:linear-gradient(180deg,#e0a800,#d19c00);
  color:#111827;
}
.btn-gold-main{
  background:linear-gradient(180deg,#f5b300,#e0a800);
  color:#1f2937;
  border:none;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(245,179,0,.35);
}

.btn-gold-main:hover{
  background:linear-gradient(180deg,#e0a800,#d19c00);
  color:#111827;
}
.btn-rounded{
  border-radius:999px;
}
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.section-title{
  font-size:1rem;
  font-weight:700;
  color:#0f172a;
}

.section-caption{
  font-size:.72rem;
  color:#64748b;
}
.alert{
  border-radius:14px;
  font-size:.8rem;
  box-shadow:0 4px 12px rgba(15,23,42,.06);
}
.form-label{
  font-size:.72rem;
  font-weight:600;
  color:#475569;
}

.form-control,
.form-select{
  border-radius:12px;
  font-size:.82rem;
  border:1px solid #e5e7eb;
}

.form-control:focus,
.form-select:focus{
  border-color:#f5b300;
  box-shadow:0 0 0 2px rgba(245,179,0,.15);
}
hr{
  border:none;
  border-top:1px solid #e5e7eb;
}
.txn-item .badge{
  font-size:.65rem;
  border-radius:6px;
  padding:4px 8px;
  font-weight:700;
  background:#f1f5f9;
  color:#334155;
}
.pending-pill{
  font-size:.7rem;
  padding:4px 10px;
  border-radius:999px;
  background:#fff7e0;
  color:#92400e;
  border:1px solid #facc15;
}
#rzpPayBtn{
  border-radius:999px;
  font-weight:700;
}
.empty-state-title{
  font-size:.9rem;
  font-weight:600;
  color:#475569;
}
.scheme-card h6{
  font-weight:700;
  letter-spacing:.01em;
}
#loadMoreInvoicesBtn{
  border-radius:999px;
  font-size:.75rem;
}
.rzp-invoice-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.small-muted{
  color:#64748b;
}
@media(max-width:480px){
  .scheme-card{
    padding:14px 16px;
  }

  .btn{
    width:100%;
  }
}
/* ===============================
   INLINE FORM MESSAGE – SaaS
   =============================== */

#formMsg{
  border-radius:12px;
  padding:8px 12px;
  font-size:.78rem;
  font-weight:600;
  line-height:1.45;
  display:none;
  box-shadow:0 4px 12px rgba(15,23,42,.06);
}

/* Error state */
#formMsg.text-danger{
  background:#fff5f5;
  border:1px solid #fca5a5;
  color:#991b1b;
}

/* Success state */
#formMsg.text-success{
  background:#ecfdf5;
  border:1px solid #86efac;
  color:#166534;
}
#formMsg{
  border-radius:12px;
  padding:8px 12px;
  font-size:.78rem;
  font-weight:600;
  line-height:1.45;
  display:none;
  box-shadow:0 4px 12px rgba(15,23,42,.06);
}

/* Error */
#formMsg.text-danger{
  background:#fff5f5;
  border:1px solid #fca5a5;
  color:#991b1b;
}

/* Success */
#formMsg.text-success{
  background:#ecfdf5;
  border:1px solid #86efac;
  color:#166534;
}
@media(max-width:480px){
  #formMsg{
    position:fixed;
    left:12px;
    right:12px;
    bottom:14px;
    z-index:9999;

    margin:0;
    border-radius:14px;
    padding:10px 14px;
    font-size:.74rem;
    box-shadow:0 10px 30px rgba(15,23,42,.18);
  }
}
/* Disabled CTA – fintech style */
.btn-disabled,
.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none !important;
}
/* ===============================
   GOLD PROGRESS RING
   =============================== */

.gold-progress{
  width:90px;
  position:relative;
}

.gold-progress svg{
  width:100%;
  transform:rotate(-90deg);
}

.gold-progress .bg{
  fill:none;
  stroke:#e5e7eb;
  stroke-width:3.2;
}

.gold-progress .progress{
  fill:none;
  stroke:#f5b300;
  stroke-width:3.2;
  stroke-linecap:round;
}

.gold-progress-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.65rem;
  font-weight:700;
  color:#92400e;
}
@media(max-width:480px){
  .gold-progress{
    margin:0 auto;
  }
}
/* ===============================
   GOLD COMPLETION PROGRESS BAR
   =============================== */

.gold-progress-wrap{
  margin-top:10px;
}

.gold-progress-meta{
  display:flex;
  justify-content:space-between;
  font-size:.72rem;
  color:#64748b;
  margin-bottom:6px;
}

.gold-progress-meta strong{
  color:#92400e;
  font-weight:700;
}

/* Bar container */
.gold-progress-bar{
  height:8px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
}

/* Progress fill */
.gold-progress-fill{
  height:100%;
  width:0;
  background:linear-gradient(90deg,#f5b300,#e0a800);
  border-radius:999px;
  transition:width .4s cubic-bezier(.22,1,.36,1);
}

/* Completed state */
.gold-progress-fill.complete{
  background:linear-gradient(90deg,#22c55e,#16a34a);
}

/* Hint text */
.gold-progress-hint{
  margin-top:6px;
  font-size:.7rem;
  color:#64748b;
}
@media(max-width:480px){
  .gold-progress-meta{
    font-size:.68rem;
  }

  .gold-progress-hint{
    font-size:.66rem;
  }
}
.gold-progress-fill{
  height:100%;
  width:0; /* start empty */
  background:linear-gradient(90deg,#f5b300,#e0a800);
  border-radius:999px;
  transition:width .8s cubic-bezier(.22,1,.36,1);
}



.btn-wa-support{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  font-size:.78rem;
  border-radius:999px;
  padding:6px 14px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}

.btn-wa-support:hover{
  transform:translateY(-1px);
}

.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.section-title{
  font-size:1rem;
  font-weight:700;
  color:#0f172a;
}

.section-caption{
  font-size:.72rem;
  color:#64748b;
}
.alert{
  border-radius:14px;
  font-size:.8rem;
  box-shadow:0 4px 12px rgba(15,23,42,.06);
}
.form-label{
  font-size:.72rem;
  font-weight:600;
  color:#475569;
}

.form-control,
.form-select{
  border-radius:12px;
  font-size:.82rem;
  border:1px solid #e5e7eb;
}

.form-control:focus,
.form-select:focus{
  border-color:#f5b300;
  box-shadow:0 0 0 2px rgba(245,179,0,.15);
}
#formMsg{
  padding:8px 12px;
  border-radius:10px;
  background:#fff5f5;
  border:1px solid #fca5a5;
  color:#991b1b;
  font-weight:600;
}

/* ===============================
   INLINE FORM MESSAGE – SaaS
   =============================== */

#formMsg{
  border-radius:12px;
  padding:8px 12px;
  font-size:.78rem;
  font-weight:600;
  line-height:1.45;
  display:none;
  box-shadow:0 4px 12px rgba(15,23,42,.06);
}

/* Error state */
#formMsg.text-danger{
  background:#fff5f5;
  border:1px solid #fca5a5;
  color:#991b1b;
}

/* Success state */
#formMsg.text-success{
  background:#ecfdf5;
  border:1px solid #86efac;
  color:#166534;
}

#formMsg{
  border-radius:12px;
  padding:8px 12px;
  font-size:.78rem;
  font-weight:600;
  line-height:1.45;
  display:none;
  box-shadow:0 4px 12px rgba(15,23,42,.06);
}

/* Error */
#formMsg.text-danger{
  background:#fff5f5;
  border:1px solid #fca5a5;
  color:#991b1b;
}

/* Success */
#formMsg.text-success{
  background:#ecfdf5;
  border:1px solid #86efac;
  color:#166534;
}
@media(max-width:480px){
  #formMsg{
    font-size:.72rem;        /* slightly smaller */
    padding:6px 10px;        /* less vertical space */
    border-radius:10px;
    box-shadow:none;         /* mobile = flat is better */
  }
}
@media(max-width:480px){
  #formMsg{
    border-left-width:3px;
  }
}

#formMsg{
  border-radius:12px;
  padding:8px 12px;
  font-size:.78rem;
  font-weight:600;
  line-height:1.45;
  display:none;
  box-shadow:0 4px 12px rgba(15,23,42,.06);
}

/* Error */
#formMsg.text-danger{
  background:#fff5f5;
  border:1px solid #fca5a5;
  color:#991b1b;
}

/* Success */
#formMsg.text-success{
  background:#ecfdf5;
  border:1px solid #86efac;
  color:#166534;
}
@media(max-width:480px){
  #formMsg{
    position:fixed;
    left:12px;
    right:12px;
    bottom:14px;
    z-index:9999;

    margin:0;
    border-radius:14px;
    padding:10px 14px;
    font-size:.74rem;
    box-shadow:0 10px 30px rgba(15,23,42,.18);
  }
}
/* Disabled CTA – fintech style */
.btn-disabled,
.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none !important;
}
/* ===============================
   GOLD PROGRESS RING
   =============================== */

.gold-progress{
  width:90px;
  position:relative;
}

.gold-progress svg{
  width:100%;
  transform:rotate(-90deg);
}

.gold-progress .bg{
  fill:none;
  stroke:#e5e7eb;
  stroke-width:3.2;
}

.gold-progress .progress{
  fill:none;
  stroke:#f5b300;
  stroke-width:3.2;
  stroke-linecap:round;
}

.gold-progress-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.65rem;
  font-weight:700;
  color:#92400e;
}
@media(max-width:480px){
  .gold-progress{
    margin:0 auto;
  }
}