/* ============================================
   WritingNepal — Digital Card (Akshar rewards) styles
   Extends style.css tokens.
   ============================================ */

.card-hero{ padding:36px 0 8px; text-align:center; }
.card-hero .eyebrow{ justify-content:center; align-items:center; }

.card-actions{
  display:flex;
  justify-content:center;
  gap:8px;
  margin:20px 0 36px;
}
.card-actions button{
  padding:9px 18px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
  color:var(--ink-soft);
  border:1.5px solid var(--line);
  background:var(--white);
  transition:transform .2s var(--bounce);
}
.card-actions button:hover{ transform:translateY(-1px); }
.card-actions button.active{ background:var(--ink); color:var(--gold); border-color:var(--ink); }

.card-stage{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:56px;
  flex-wrap:wrap;
  margin-bottom:56px;
}
.card-column{ display:flex; flex-direction:column; align-items:center; gap:12px; }

/* ---- the physical card ---- */
.member-card{
  width:340px;
  border-radius:18px;
  background:linear-gradient(155deg, #1B120A 0%, #120A08 55%, #2A1B0C 100%);
  border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--gold);
  padding:22px;
  color:var(--paper);
  position:relative;
  overflow:hidden;
}
.member-card::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 85% 10%, rgba(247,198,0,0.14) 0%, transparent 45%),
    repeating-linear-gradient(135deg, rgba(247,198,0,0.04) 0 2px, transparent 2px 26px);
  pointer-events:none;
}

/* True bank-card proportions (ISO/IEC 7810 ID-1, 85.6mm x 53.98mm ≈ 1.586:1) */
.bank-card{
  aspect-ratio: 1.586 / 1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.bank-card-row{
  display:flex; align-items:center; justify-content:space-between; position:relative; gap:12px;
}
.bank-card-chip{ flex:none; line-height:0; }
.bank-card-brand{ display:flex; align-items:center; gap:8px; }
.bank-card-brand .mark{ width:26px; height:26px; flex:none; }
.bank-card-wordmark{
  font-family:'Work Sans', sans-serif; font-weight:800; font-size:.92rem;
  letter-spacing:.1em; color:var(--gold); white-space:nowrap;
}

.bank-card-number{
  font-family:'Courier New', 'Space Mono', monospace;
  font-weight:700;
  font-size:clamp(1.05rem, 4.4vw, 1.32rem);
  letter-spacing:.12em;
  color:var(--paper);
  margin:14px 0;
  position:relative;
}

.bank-card-bottom{ align-items:flex-end; flex-wrap:wrap; row-gap:10px; }
.bank-card-holder, .bank-card-valid{
  display:flex; flex-direction:column; gap:3px; min-width:0;
}
.bank-card-holder{ flex:1 1 auto; }
.bank-card-holder .lbl, .bank-card-valid .lbl{
  font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(251,248,242,0.55);
}
.bank-card-holder strong, .bank-card-valid strong{
  font-family:'Courier New', 'Space Mono', monospace; font-weight:700; font-size:.82rem;
  letter-spacing:.03em; color:var(--paper);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.bank-card-holder strong{ max-width:190px; }

.member-tier{
  font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--gold);
  background:rgba(247,198,0,0.14); border:1px solid rgba(247,198,0,0.35);
  padding:4px 9px; border-radius:999px; white-space:nowrap; flex:none;
}

.card-legalname-nudge{
  text-align:center; font-size:.78rem; color:var(--ink-soft);
  max-width:280px; margin-top:2px;
}
.card-legalname-nudge a{ color:var(--clay-deep); font-weight:700; }

/* ---- earned total ---- */
.earned-block{ text-align:left; }
.earned-block .lede{ font-size:1.4rem; color:var(--ink); }
.earned-block .amount{
  font-family:'Fraunces',serif; font-weight:900; font-size:3rem; color:var(--gold-deep);
  line-height:1;
}
.earned-block .rupee-eq{ font-size:.95rem; color:var(--ink-soft); margin-top:8px; }
.earned-block .progress-track{
  width:280px; height:10px; border-radius:999px; background:var(--paper-deep);
  overflow:hidden; margin-top:16px;
}
.earned-block .progress-fill{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--gold), var(--clay));
}
.earned-block .progress-label{ font-size:.78rem; color:var(--ink-soft); margin-top:6px; }

/* ---- panels: activity / redeem ---- */
.card-panel{ display:none; max-width:760px; margin:0 auto 60px; }
.card-panel.active{ display:block; animation:step-in .3s var(--bounce); }

.activity-log{ display:flex; flex-direction:column; gap:2px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.activity-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--line); font-size:.9rem;
}
.activity-row:last-child{ border-bottom:none; }
.activity-row .what{ display:flex; flex-direction:column; }
.activity-row .what .date{ font-size:.74rem; color:var(--ink-soft); }
.activity-row .amt{ font-weight:800; color:var(--leaf-deep); font-family:'Fraunces',serif; font-size:1.05rem; }

.redeem-intro{ text-align:center; margin-bottom:32px; }
.redeem-intro h2{ font-size:1.5rem; }
.redeem-intro p{ color:var(--ink-soft); max-width:56ch; margin:0 auto; }
.rate-card{
  background:var(--white); border:2px solid var(--ink); border-radius:var(--radius-lg);
  box-shadow:5px 5px 0 var(--gold); padding:28px; text-align:center; margin-bottom:32px;
}
.rate-card .rate{ font-family:'Fraunces',serif; font-weight:900; font-size:1.8rem; }
.rate-card .rate .eq{ color:var(--clay-deep); }
.rate-card p{ color:var(--ink-soft); font-size:.88rem; margin-top:8px; }

.earn-table{ width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.earn-table th, .earn-table td{ text-align:left; padding:12px 18px; font-size:.88rem; border-bottom:1px solid var(--line); }
.earn-table th{ background:var(--paper-deep); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
.earn-table tr:last-child td{ border-bottom:none; }
.earn-table td.amt{ font-weight:800; color:var(--leaf-deep); font-family:'Fraunces',serif; }

@media (max-width: 720px){
  .card-stage{ flex-direction:column; gap:32px; text-align:center; }
  .earned-block{ text-align:center; }
  .earned-block .progress-track{ margin-left:auto; margin-right:auto; }
  .activity-row{ flex-direction:column; align-items:flex-start; gap:4px; }
  .member-card{ width:100%; max-width:340px; }
  .bank-card-holder strong{ max-width:150px; }
}