
/* Pyrk client dashboard / rewards professional UX */
.client-rewards-suite {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, .75fr) !important;
  gap: 24px !important;
  align-items: start !important;
  margin: 24px 0 !important;
}

.rewards-market-panel-pro,
.badges-side-panel-pro {
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 30px !important;
  background: #fff !important;
  box-shadow: 0 24px 70px rgba(16, 24, 40, .08) !important;
}

.rewards-market-panel-pro {
  position: relative !important;
  overflow: hidden !important;
  padding: 28px !important;
}

.rewards-market-panel-pro::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 8px !important;
  background: linear-gradient(90deg, #1c7c54, #19b67e, #d8a93f) !important;
}

.rewards-suite-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

.rewards-suite-head h2 {
  margin: 4px 0 8px !important;
  font-size: clamp(1.75rem, 3vw, 2.35rem) !important;
  letter-spacing: -.04em !important;
}

.reward-store-header-pro {
  display: grid !important;
  grid-template-columns: minmax(220px, .8fr) minmax(190px, .55fr) minmax(280px, 1.1fr) !important;
  gap: 14px !important;
  margin: 20px 0 24px !important;
}

.reward-wallet-pro,
.reward-kpi-pro,
.reward-info-pro {
  min-height: 150px !important;
  border-radius: 24px !important;
  padding: 20px !important;
  border: 1px solid rgba(28,124,84,.14) !important;
}

.reward-wallet-pro {
  color: #fff !important;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.24), transparent 30%),
    linear-gradient(135deg, #0f172a, #1c7c54) !important;
  box-shadow: 0 22px 56px rgba(28,124,84,.18) !important;
}

.reward-wallet-label,
.reward-kpi-pro span {
  display: block !important;
  text-transform: uppercase !important;
  letter-spacing: .11em !important;
  font-size: .76rem !important;
  font-weight: 900 !important;
  opacity: .82 !important;
}

.reward-wallet-pro strong {
  display: block !important;
  margin: 12px 0 4px !important;
  font-size: clamp(3rem, 6vw, 4.3rem) !important;
  line-height: .88 !important;
  letter-spacing: -.06em !important;
}

.reward-wallet-pro small {
  display: block !important;
  opacity: .82 !important;
  font-weight: 800 !important;
}

.reward-kpi-pro {
  display: grid !important;
  align-content: center !important;
  text-align: center !important;
  background: linear-gradient(135deg, #ecfdf3, #ffffff) !important;
}

.reward-kpi-pro strong {
  display: block !important;
  margin: 8px 0 !important;
  font-size: 3.2rem !important;
  line-height: 1 !important;
  color: #1c7c54 !important;
}

.reward-kpi-pro small {
  color: #64748b !important;
  font-weight: 900 !important;
}

.reward-info-pro {
  background:
    radial-gradient(circle at 100% 0%, rgba(28,124,84,.10), transparent 36%),
    #fbfdff !important;
}

.reward-info-pro strong {
  display: block !important;
  margin-bottom: 8px !important;
  font-size: 1.05rem !important;
  color: #0f172a !important;
}

.reward-info-pro p {
  margin: 0 !important;
  color: #64748b !important;
  line-height: 1.55 !important;
}

.rewards-section-title {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 6px 0 14px !important;
}

.rewards-section-title h3 {
  margin: 0 0 4px !important;
  font-size: 1.25rem !important;
}

.rewards-section-title p {
  margin: 0 !important;
  color: #64748b !important;
}

.reward-store-grid-pro {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)) !important;
  gap: 18px !important;
}

.reward-tile-pro {
  position: relative !important;
  display: grid !important;
  gap: 16px !important;
  min-height: 320px !important;
  padding: 20px !important;
  border: 1px solid rgba(15,23,42,.09) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(28,124,84,.10), transparent 32%),
    linear-gradient(180deg, #fff, #fbfdff) !important;
  box-shadow: 0 18px 46px rgba(16,24,40,.07) !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}

.reward-tile-pro:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(28,124,84,.24) !important;
  box-shadow: 0 28px 70px rgba(16,24,40,.12) !important;
}

.reward-tile-pro.is-locked,
.reward-tile-pro.is-out {
  background:
    radial-gradient(circle at 100% 0%, rgba(100,116,139,.10), transparent 32%),
    linear-gradient(180deg, #fff, #fbfdff) !important;
}

.reward-tile-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.reward-icon-pro {
  width: 64px !important;
  height: 64px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #eef2ff, #ecfdf3) !important;
  font-size: 2rem !important;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.05) !important;
}

.reward-status-pro {
  max-width: 150px !important;
  text-align: right !important;
  font-size: .82rem !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  color: #1c7c54 !important;
  background: #dcfae6 !important;
  border-radius: 999px !important;
  padding: 8px 11px !important;
}

.reward-tile-pro.is-locked .reward-status-pro,
.reward-tile-pro.is-out .reward-status-pro {
  color: #475569 !important;
  background: #eef2f6 !important;
}

.reward-tile-body h3 {
  margin: 0 0 8px !important;
  font-size: 1.3rem !important;
  line-height: 1.12 !important;
  letter-spacing: -.03em !important;
  color: #0f172a !important;
}

.reward-tile-body p {
  margin: 0 !important;
  min-height: 48px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
}

.reward-meta-pro {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.reward-meta-pro span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 8px 11px !important;
  border-radius: 999px !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  font-size: .85rem !important;
  font-weight: 900 !important;
}

.reward-meta-pro b {
  color: #0f172a !important;
}

.reward-progress-pro {
  display: grid !important;
  gap: 8px !important;
}

.reward-progress-pro > div {
  height: 11px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: #e2e8f0 !important;
}

.reward-progress-pro i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #1c7c54, #21c891) !important;
}

.reward-tile-pro.is-locked .reward-progress-pro i,
.reward-tile-pro.is-out .reward-progress-pro i {
  background: linear-gradient(90deg, #94a3b8, #cbd5e1) !important;
}

.reward-progress-pro small {
  color: #64748b !important;
  font-weight: 800 !important;
}

.reward-claim-button-pro {
  width: 100% !important;
  min-height: 48px !important;
  justify-content: center !important;
  border-radius: 17px !important;
  font-size: .95rem !important;
}

.reward-claim-button-pro:disabled {
  cursor: not-allowed !important;
  opacity: .72 !important;
  background: #e2e8f0 !important;
  color: #475569 !important;
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
}

.claims-panel-pro {
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(15,23,42,.08) !important;
}

.reward-claim-history-pro {
  border-radius: 20px !important;
  max-height: 320px !important;
  overflow: auto !important;
}

.badges-side-panel-pro {
  position: sticky !important;
  top: 96px !important;
  padding: 24px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(28,124,84,.08), transparent 30%),
    #fff !important;
}

.badges-pro-list,
#badgesList.badges-pro-list {
  display: grid !important;
  gap: 12px !important;
}

.badge-pro-item {
  display: grid !important;
  grid-template-columns: 52px 1fr !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 13px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 20px !important;
  background: #fbfdff !important;
}

.badge-pro-item span {
  width: 52px !important;
  height: 52px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 18px !important;
  background: #f1f5f9 !important;
  font-size: 1.65rem !important;
}

.badge-pro-item strong,
.badge-pro-item small {
  display: block !important;
}

.badge-pro-item small {
  margin-top: 3px !important;
  color: #64748b !important;
  font-size: .84rem !important;
  font-weight: 800 !important;
}

.empty-mini,
.reward-empty-pro {
  padding: 22px !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 22px !important;
  background: #fbfdff !important;
  text-align: center !important;
}

.empty-mini strong,
.reward-empty-pro strong {
  display: block !important;
  margin-bottom: 6px !important;
  color: #0f172a !important;
}

.empty-mini p,
.reward-empty-pro p {
  margin: 0 !important;
  color: #64748b !important;
}

.reward-empty-pro {
  grid-column: 1/-1 !important;
}

@media (max-width: 1180px) {
  .client-rewards-suite {
    grid-template-columns: 1fr !important;
  }
  .badges-side-panel-pro {
    position: static !important;
  }
}

@media (max-width: 880px) {
  .reward-store-header-pro {
    grid-template-columns: 1fr !important;
  }
  .rewards-suite-head {
    flex-direction: column !important;
  }
  .rewards-suite-head .btn {
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  .rewards-market-panel-pro,
  .badges-side-panel-pro {
    border-radius: 22px !important;
    padding: 18px !important;
  }
  .reward-store-grid-pro {
    grid-template-columns: 1fr !important;
  }
  .reward-tile-pro {
    min-height: auto !important;
  }
}
