/* =====================================================
   P77 App — Bonuses & Refer-and-Earn pages
   ===================================================== */

/* ── Bonus type cards ── */
.bonus-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-lg); }
.bonus-card { padding: var(--sp-xl); position: relative; overflow: hidden; }
.bonus-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-gold);
}
.bonus-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); margin-bottom: var(--sp-md); }
.bonus-card .ico { font-size: 2rem; line-height: 1; }
.bonus-card__value {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em;
  color: #0d0d12; background: var(--gradient-gold); padding: 4px 10px; border-radius: var(--radius-pill);
}
.bonus-card h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-sm); }
.bonus-card p { font-size: var(--fs-sm); color: var(--clr-text-secondary); }
.bonus-card ul { margin-top: var(--sp-sm); padding-left: 1.2em; list-style: disc; display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--clr-text-secondary); }

/* ── Referral tier table ── */
.tier-table { display: grid; gap: var(--sp-sm); }
.tier-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg); border: 1px solid var(--clr-border); border-radius: var(--radius-md);
  background: var(--clr-bg-card);
}
.tier-row.is-highlight { border-color: var(--clr-accent-gold); box-shadow: var(--shadow-glow); }
.tier-badge {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  background: var(--gradient-gold); color: #0d0d12; padding: 6px 12px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.tier-desc { color: var(--clr-text-secondary); font-size: var(--fs-sm); }
.tier-reward { font-family: var(--font-display); font-weight: 700; color: var(--clr-accent-gold); font-size: var(--fs-lg); white-space: nowrap; }

/* ── Referral flow (3-up) ── */
.flow-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-lg); position: relative; }
.flow-step { text-align: center; padding: var(--sp-xl) var(--sp-lg); }
.flow-step .flow-num {
  width: 52px; height: 52px; margin: 0 auto var(--sp-md); border-radius: 50%;
  display: grid; place-items: center; background: var(--gradient-gold); color: #0d0d12;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); box-shadow: var(--shadow-glow);
}
.flow-step h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-sm); }
.flow-step p { font-size: var(--fs-sm); color: var(--clr-text-secondary); margin: 0; }

/* ── Referral code / share box ── */
.share-box {
  display: flex; flex-wrap: wrap; gap: var(--sp-md); align-items: center; justify-content: space-between;
  padding: var(--sp-lg); max-width: 560px; margin-inline: auto;
}
.share-box code {
  font-family: var(--font-mono); font-size: var(--fs-lg); color: var(--clr-accent-gold);
  background: rgba(0,0,0,0.35); padding: 8px 16px; border-radius: var(--radius-sm); letter-spacing: 0.06em;
}

@media (min-width: 700px) { .bonus-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .flow-grid { grid-template-columns: repeat(4, 1fr); } }