/* =========================================================
   PAYMENTS PAGE (Page-scoped) - ENHANCED EDITION
   - Vibrant gradients + dynamic animations
   - Rich color palette with gold/silver/bronze accents
   - Mobile-first responsive design
   - Light/Dark theme support via html[data-theme="light|dark"]
   - No underline anywhere
   - Premium glass morphism effects
   ========================================================= */

.fe-payments {
  padding-top: 8px;
  padding-bottom: 14px;
  position: relative;
  overflow: hidden;
}

.fe-payments::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1400px;
  height: 600px;
  background: radial-gradient(ellipse at top, 
    rgba(168,85,247,0.15) 0%, 
    rgba(59,130,246,0.10) 25%, 
    transparent 60%);
  pointer-events: none;
  animation: fePayBgPulse 8s ease-in-out infinite;
}

/* No underline anywhere on this page */
.fe-payments a,
.fe-payments a:hover,
.fe-payments a:focus,
.fe-payments a:focus-visible,
.fe-payments a:active {
  text-decoration: none !important;
}

/* =========================================================
   SECTION: UPI
   ========================================================= */

.fe-payments-upi {
  padding-top: 46px;
  padding-bottom: 34px;
  position: relative;
}

/* Header */
.fe-payments-head {
  display: grid;
  gap: 14px;
  align-items: end;
  margin-bottom: 18px;
  animation: fePayFadeUp 0.6s ease-out;
}

@media (min-width: 1024px) {
  .fe-payments-head {
    margin-bottom: 24px;
  }
}

.fe-payments-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--fe-border, rgba(255,255,255,0.12));
  background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(168,85,247,0.12));
  color: var(--fe-text, rgba(255,255,255,0.92));
  font-weight: 900;
  font-size: 13px;
  width: fit-content;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  animation: fePayShimmer 3s ease-in-out infinite;
  box-shadow: 0 4px 16px rgba(168,85,247,0.20);
}

.fe-payments-kicker::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: fePayShine 3.2s ease-in-out infinite;
}

html[data-theme="light"] .fe-payments-kicker {
  background: linear-gradient(135deg, rgba(99,102,241,0.14), rgba(168,85,247,0.10));
  border-color: rgba(15,23,42,0.14);
  color: rgba(15,23,42,0.90);
  box-shadow: 0 4px 16px rgba(168,85,247,0.12);
}

.fe-payments-kicker-gold {
  background: linear-gradient(135deg, rgba(251,191,36,0.22), rgba(245,158,11,0.14), rgba(168,85,247,0.10));
  border-color: rgba(251,191,36,0.30);
  box-shadow: 0 4px 20px rgba(251,191,36,0.24);
}

html[data-theme="light"] .fe-payments-kicker-gold {
  background: linear-gradient(135deg, rgba(251,191,36,0.16), rgba(245,158,11,0.10), rgba(168,85,247,0.08));
  border-color: rgba(251,191,36,0.24);
}

.fe-payments-title {
  margin: 2px 0 0;
  font-weight: 950;
  letter-spacing: -0.03em;
  font-size: clamp(28px, 3.6vw, 48px);
  background: linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6, #fb923c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: fePayGradientFlow 4s ease infinite;
  filter: drop-shadow(0 4px 12px rgba(168,85,247,0.30));
}

html[data-theme="light"] .fe-payments-title {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 3px 10px rgba(168,85,247,0.20));
}

.fe-payments-subtitle {
  margin: 0;
  max-width: 85ch;
  color: var(--fe-text-muted, rgba(255,255,255,0.75));
  line-height: 1.7;
  font-size: 15.5px;
}

html[data-theme="light"] .fe-payments-subtitle {
  color: rgba(15,23,42,0.72);
}

/* =========================================================
   GRID
   ========================================================= */

.fe-payments-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 16px;
}

@media (min-width: 780px) {
  .fe-payments-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (min-width: 1200px) {
  .fe-payments-grid {
    grid-template-columns: 1.1fr 1fr 0.95fr;
    gap: 20px;
  }
}

/* =========================================================
   CARDS (Premium glass + vibrant border glow)
   ========================================================= */

.fe-payments-card {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--fe-border, rgba(255,255,255,0.14));
  background: rgba(255,255,255,0.06);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  padding: 18px;
  overflow: hidden;
  backdrop-filter: blur(16px);
  transition: transform 340ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 340ms ease,
              border-color 340ms ease,
              background-color 340ms ease;
}

html[data-theme="light"] .fe-payments-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.88));
  border-color: rgba(15,23,42,0.16);
  box-shadow: 0 18px 52px rgba(15,23,42,0.12);
}

.fe-payments-card::before {
  content: "";
  position: absolute;
  inset: -80px -80px auto -80px;
  height: 240px;
  background: radial-gradient(closest-side, rgba(168,85,247,0.28), rgba(59,130,246,0.18), transparent 70%);
  opacity: 0.70;
  pointer-events: none;
  animation: fePayFloatGlow 6s ease-in-out infinite;
}

html[data-theme="light"] .fe-payments-card::before {
  background: radial-gradient(closest-side, rgba(168,85,247,0.20), rgba(59,130,246,0.12), transparent 70%);
}

.fe-payments-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1.5px;
  background: linear-gradient(135deg, 
    rgba(168,85,247,0.40), 
    rgba(59,130,246,0.35), 
    rgba(34,197,94,0.30),
    rgba(251,191,36,0.25));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.30s ease;
  pointer-events: none;
  animation: fePayBorderRotate 4s linear infinite;
}

.fe-payments-card:hover::after {
  opacity: 1;
}

.fe-payments-card:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: var(--fe-border-hover, rgba(168,85,247,0.45));
  background: rgba(255,255,255,0.09);
  box-shadow: 0 36px 90px rgba(168,85,247,0.28),
              0 0 50px rgba(168,85,247,0.16);
}

html[data-theme="light"] .fe-payments-card:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255,255,255,0.92));
  border-color: rgba(168,85,247,0.35);
  box-shadow: 0 32px 80px rgba(168,85,247,0.22);
}

/* Card top */
.fe-payments-cardtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.fe-payments-ic {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  transition: all 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

html[data-theme="light"] .fe-payments-ic {
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.14);
}

.fe-payments-ic::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.fe-payments-card:hover .fe-payments-ic {
  transform: rotate(8deg) scale(1.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
}

.fe-payments-card:hover .fe-payments-ic::before {
  opacity: 1;
  animation: fePayIconGlow 2s ease-in-out infinite;
}

.fe-payments-ic i {
  font-size: 22px;
  color: var(--fe-text, rgba(255,255,255,0.94));
  animation: fePayIconFloat 3s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

html[data-theme="light"] .fe-payments-ic i {
  color: rgba(15,23,42,0.92);
}

/* Icon gradients with enhanced colors */
.fe-payments-ic1 {
  background: linear-gradient(135deg, rgba(59,130,246,0.35), rgba(37,99,235,0.18));
  border-color: rgba(59,130,246,0.40);
  box-shadow: 0 8px 24px rgba(59,130,246,0.25);
}

.fe-payments-ic2 {
  background: linear-gradient(135deg, rgba(168,85,247,0.32), rgba(147,51,234,0.18));
  border-color: rgba(168,85,247,0.40);
  box-shadow: 0 8px 24px rgba(168,85,247,0.25);
}

.fe-payments-ic3 {
  background: linear-gradient(135deg, rgba(34,197,94,0.30), rgba(16,185,129,0.16));
  border-color: rgba(34,197,94,0.38);
  box-shadow: 0 8px 24px rgba(34,197,94,0.25);
}

html[data-theme="light"] .fe-payments-ic1 {
  background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(219,234,254,0.92));
  border-color: rgba(59,130,246,0.28);
  box-shadow: 0 6px 20px rgba(59,130,246,0.16);
}

html[data-theme="light"] .fe-payments-ic2 {
  background: linear-gradient(135deg, rgba(168,85,247,0.20), rgba(243,232,255,0.92));
  border-color: rgba(168,85,247,0.28);
  box-shadow: 0 6px 20px rgba(168,85,247,0.16);
}

html[data-theme="light"] .fe-payments-ic3 {
  background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(220,252,231,0.94));
  border-color: rgba(34,197,94,0.26);
  box-shadow: 0 6px 20px rgba(34,197,94,0.16);
}

/* Badge */
.fe-payments-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--fe-border, rgba(255,255,255,0.14));
  background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(59,130,246,0.12));
  color: var(--fe-text-muted, rgba(255,255,255,0.88));
  font-weight: 950;
  font-size: 12.8px;
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 12px rgba(168,85,247,0.18);
}

.fe-payments-badge:hover {
  transform: translateY(-3px) scale(1.02);
  background: linear-gradient(135deg, rgba(168,85,247,0.26), rgba(59,130,246,0.18));
  border-color: rgba(168,85,247,0.35);
  box-shadow: 0 6px 18px rgba(168,85,247,0.28);
}

html[data-theme="light"] .fe-payments-badge {
  background: linear-gradient(135deg, rgba(168,85,247,0.12), rgba(59,130,246,0.09));
  border-color: rgba(15,23,42,0.14);
  color: rgba(15,23,42,0.76);
  box-shadow: 0 3px 10px rgba(168,85,247,0.12);
}

.fe-payments-badge-soft {
  background: linear-gradient(135deg, rgba(34,197,94,0.14), rgba(59,130,246,0.10));
  box-shadow: 0 4px 12px rgba(34,197,94,0.16);
}

html[data-theme="light"] .fe-payments-badge-soft {
  background: linear-gradient(135deg, rgba(34,197,94,0.11), rgba(59,130,246,0.08));
}

.fe-payments-badge-wa {
  background: linear-gradient(135deg, rgba(34,197,94,0.20), rgba(16,185,129,0.12));
  border-color: rgba(34,197,94,0.32);
  box-shadow: 0 4px 14px rgba(34,197,94,0.20);
}

/* Text */
.fe-payments-cardtitle {
  margin: 0 0 10px;
  font-weight: 950;
  letter-spacing: -0.01em;
  font-size: 19px;
  color: var(--fe-text, rgba(255,255,255,0.94));
  transition: all 0.28s ease;
}

html[data-theme="light"] .fe-payments-cardtitle {
  color: rgba(15,23,42,0.94);
}

.fe-payments-card:hover .fe-payments-cardtitle {
  color: rgba(168,85,247,0.98);
  text-shadow: 0 2px 8px rgba(168,85,247,0.25);
}

html[data-theme="light"] .fe-payments-card:hover .fe-payments-cardtitle {
  color: rgba(139,92,246,0.98);
}

.fe-payments-carddesc {
  margin: 0 0 14px;
  color: var(--fe-text-muted, rgba(255,255,255,0.74));
  line-height: 1.7;
  font-size: 14.2px;
}

.fe-payments-carddesc strong {
  color: var(--fe-text, rgba(255,255,255,0.92));
  font-weight: 900;
}

html[data-theme="light"] .fe-payments-carddesc {
  color: rgba(15,23,42,0.72);
}

html[data-theme="light"] .fe-payments-carddesc strong {
  color: rgba(15,23,42,0.90);
}

/* =========================================================
   QR AREA with Pulse Animation
   ========================================================= */

.fe-payments-qr-wrap {
  border-radius: 18px;
  border: 1px solid var(--fe-border, rgba(255,255,255,0.14));
  background: rgba(255,255,255,0.05);
  padding: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: all 0.32s ease;
  position: relative;
}

html[data-theme="light"] .fe-payments-qr-wrap {
  background: rgba(15,23,42,0.03);
  border-color: rgba(15,23,42,0.14);
}

.fe-payments-qr-pulse {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(circle, rgba(168,85,247,0.25) 0%, transparent 70%);
  opacity: 0.6;
  animation: fePayQrPulse 3s ease-in-out infinite;
}

.fe-payments-qr-pulse-wa {
  background: radial-gradient(circle, rgba(34,197,94,0.28) 0%, transparent 70%);
}

.fe-payments-qr-img {
  width: min(340px, 100%);
  height: auto;
  border-radius: 16px;
  display: block;
  box-shadow: 0 20px 60px rgba(0,0,0,0.22);
  transform: translateZ(0);
  position: relative;
  z-index: 1;
  transition: transform 0.32s ease;
}

html[data-theme="light"] .fe-payments-qr-img {
  box-shadow: 0 18px 50px rgba(15,23,42,0.14);
}

.fe-payments-qr-wrap:hover .fe-payments-qr-img {
  transform: scale(1.02);
}

/* Link wrapper for WhatsApp QR */
.fe-payments-waqr-link {
  cursor: pointer;
}

.fe-payments-waqr-link:hover {
  transform: translateY(-4px);
  border-color: rgba(34,197,94,0.38);
  background: rgba(34,197,94,0.10);
  box-shadow: 0 16px 48px rgba(34,197,94,0.22);
}

html[data-theme="light"] .fe-payments-waqr-link:hover {
  border-color: rgba(34,197,94,0.28);
  background: rgba(34,197,94,0.08);
}

.fe-payments-qr-note {
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 16px;
  border: 1px solid var(--fe-border, rgba(255,255,255,0.14));
  background: rgba(255,255,255,0.05);
  color: var(--fe-text-muted, rgba(255,255,255,0.82));
  font-weight: 850;
  font-size: 13px;
}

html[data-theme="light"] .fe-payments-qr-note {
  background: rgba(15,23,42,0.03);
  border-color: rgba(15,23,42,0.14);
  color: rgba(15,23,42,0.74);
}

.fe-payments-qr-note-wa {
  background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(16,185,129,0.06));
  border-color: rgba(34,197,94,0.24);
}

.fe-payments-enrollment-notice {
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(251,191,36,0.28);
  background: linear-gradient(135deg, rgba(251,191,36,0.14), rgba(245,158,11,0.08));
  color: var(--fe-text, rgba(255,255,255,0.90));
  font-weight: 850;
  font-size: 13px;
  animation: fePayGentlePulse 2.5s ease-in-out infinite;
}

html[data-theme="light"] .fe-payments-enrollment-notice {
  background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(245,158,11,0.06));
  border-color: rgba(251,191,36,0.22);
  color: rgba(15,23,42,0.88);
}

.fe-payments-enrollment-notice i {
  color: rgba(251,191,36,0.95);
  font-size: 16px;
}

.fe-payments-enrollment-notice strong {
  color: var(--fe-text, rgba(255,255,255,0.96));
  font-weight: 950;
}

html[data-theme="light"] .fe-payments-enrollment-notice strong {
  color: rgba(15,23,42,0.94);
}

/* =========================================================
   DETAILS + ACTIONS
   ========================================================= */

.fe-payments-details {
  display: grid;
  gap: 11px;
  margin-top: 12px;
  margin-bottom: 16px;
}

.fe-payments-row {
  display: grid;
  gap: 9px;
  padding: 13px;
  border-radius: 18px;
  border: 1px solid var(--fe-border, rgba(255,255,255,0.14));
  background: rgba(255,255,255,0.05);
  transition: all 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fe-payments-row:hover {
  transform: translateY(-3px);
  border-color: rgba(168,85,247,0.36);
  background: rgba(168,85,247,0.10);
  box-shadow: 0 8px 24px rgba(168,85,247,0.18);
}

html[data-theme="light"] .fe-payments-row {
  background: rgba(15,23,42,0.03);
  border-color: rgba(15,23,42,0.14);
}

html[data-theme="light"] .fe-payments-row:hover {
  border-color: rgba(168,85,247,0.26);
  background: rgba(168,85,247,0.08);
}

@media (min-width: 680px) {
  .fe-payments-row {
    grid-template-columns: 170px 1fr;
    align-items: center;
  }
}

.fe-payments-rowlabel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 950;
  color: var(--fe-text, rgba(255,255,255,0.94));
}

html[data-theme="light"] .fe-payments-rowlabel {
  color: rgba(15,23,42,0.90);
}

.fe-payments-rowlabel i {
  color: rgba(168,85,247,0.95);
  font-size: 15px;
}

.fe-payments-rowvalue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--fe-text-muted, rgba(255,255,255,0.84));
  font-weight: 870;
  min-width: 0;
}

html[data-theme="light"] .fe-payments-rowvalue {
  color: rgba(15,23,42,0.78);
}

.fe-payments-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 920;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Buttons (premium styling) */
.fe-payments-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 16px;
  border: 1px solid var(--fe-border, rgba(255,255,255,0.14));
  background: rgba(255,255,255,0.06);
  color: var(--fe-text, rgba(255,255,255,0.94));
  font-weight: 950;
  font-size: 13.2px;
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

html[data-theme="light"] .fe-payments-btn {
  background: rgba(255,255,255,0.92);
  border-color: rgba(15,23,42,0.14);
  color: rgba(15,23,42,0.90);
  box-shadow: 0 6px 20px rgba(15,23,42,0.08);
}

.fe-payments-btn:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(168,85,247,0.42);
  background: rgba(168,85,247,0.12);
  box-shadow: 0 12px 32px rgba(168,85,247,0.26);
}

html[data-theme="light"] .fe-payments-btn:hover {
  border-color: rgba(168,85,247,0.26);
  box-shadow: 0 14px 38px rgba(168,85,247,0.16);
}

.fe-payments-copy i {
  color: rgba(168,85,247,0.98);
  transition: transform 0.22s ease;
}

.fe-payments-copy:hover i {
  transform: scale(1.15);
}

.fe-payments-actions {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.fe-payments-wa {
  justify-content: center;
  padding: 13px 16px;
  border-color: rgba(34,197,94,0.32);
  background: linear-gradient(135deg, rgba(34,197,94,0.22), rgba(16,185,129,0.12));
  box-shadow: 0 6px 20px rgba(34,197,94,0.20);
}

.fe-payments-wa:hover {
  border-color: rgba(34,197,94,0.48);
  background: linear-gradient(135deg, rgba(34,197,94,0.30), rgba(16,185,129,0.18));
  box-shadow: 0 14px 40px rgba(34,197,94,0.26);
}

html[data-theme="light"] .fe-payments-wa {
  background: linear-gradient(135deg, rgba(34,197,94,0.14), rgba(16,185,129,0.09));
  border-color: rgba(34,197,94,0.24);
}

.fe-payments-minihelp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 16px;
  border: 1px solid var(--fe-border, rgba(255,255,255,0.14));
  background: rgba(255,255,255,0.05);
  color: var(--fe-text-muted, rgba(255,255,255,0.78));
  font-weight: 870;
  font-size: 12.8px;
}

html[data-theme="light"] .fe-payments-minihelp {
  background: rgba(15,23,42,0.03);
  border-color: rgba(15,23,42,0.14);
  color: rgba(15,23,42,0.74);
}

.fe-payments-minihelp code {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--fe-border, rgba(255,255,255,0.14));
  background: rgba(255,255,255,0.05);
  font-weight: 970;
  font-size: 12.2px;
  color: var(--fe-text, rgba(255,255,255,0.90));
}

html[data-theme="light"] .fe-payments-minihelp code {
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.12);
  color: rgba(15,23,42,0.86);
}
/* =========================================================
   TOPPERS SECTION (Payments Page)
   - Premium topper cards + year blocks
   - Light/Dark compatible
   - FIX INCLUDED: Rank ribbon will NOT overlap score badge
   Requires PHP: add class "has-ribbon" for rank <= 3 cards
========================================================= */

/* =========================================================
   SECTION WRAPPER
========================================================= */
.fe-payments-toppers{
  padding-top: 34px;
  padding-bottom: 46px;
  position: relative;
}

.fe-payments-toppers::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1400px;
  height: 500px;
  background: radial-gradient(
    ellipse at center,
    rgba(251,191,36,0.12) 0%,
    rgba(168,85,247,0.08) 30%,
    transparent 60%
  );
  pointer-events: none;
  animation: fePayBgPulse 8s ease-in-out infinite reverse;
}

/* =========================================================
   YEAR LIST + BLOCKS
========================================================= */
.fe-payments-years{
  display: grid;
  gap: 18px;
  margin-top: 16px;
}

.fe-payments-yearblock{
  border-radius: 20px;
  border: 1px solid var(--fe-border, rgba(255,255,255,0.14));
  background: rgba(255,255,255,0.05);
  padding: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}

html[data-theme="light"] .fe-payments-yearblock{
  background: rgba(15,23,42,0.03);
  border-color: rgba(15,23,42,0.14);
  box-shadow: 0 10px 36px rgba(15,23,42,0.10);
}

.fe-payments-yearblock::before{
  content: "";
  position: absolute;
  inset: -90px -90px auto -90px;
  height: 260px;
  background: radial-gradient(
    closest-side,
    rgba(251,191,36,0.20),
    rgba(168,85,247,0.14),
    transparent 70%
  );
  opacity: 0.70;
  pointer-events: none;
  animation: fePayFloatGlow 6s ease-in-out infinite;
}

html[data-theme="light"] .fe-payments-yearblock::before{
  background: radial-gradient(
    closest-side,
    rgba(251,191,36,0.14),
    rgba(168,85,247,0.10),
    transparent 70%
  );
}

/* =========================================================
   YEAR HEADER
========================================================= */
.fe-payments-yearhead{
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.fe-payments-yearleft{
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.fe-payments-yearbadge{
  background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(245,158,11,0.12));
  border-color: rgba(251,191,36,0.30);
  box-shadow: 0 4px 14px rgba(251,191,36,0.18);
}

.fe-payments-yearmeta{
  display: grid;
  gap: 3px;
}

.fe-payments-yeartitle{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 950;
  color: var(--fe-text, rgba(255,255,255,0.94));
}

html[data-theme="light"] .fe-payments-yeartitle{
  color: rgba(15,23,42,0.90);
}

.fe-payments-yearsub{
  color: var(--fe-text-muted, rgba(255,255,255,0.74));
  font-weight: 870;
  font-size: 13px;
}

html[data-theme="light"] .fe-payments-yearsub{
  color: rgba(15,23,42,0.74);
}

.fe-payments-yearhint{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid var(--fe-border, rgba(255,255,255,0.14));
  background: rgba(255,255,255,0.05);
  color: var(--fe-text-muted, rgba(255,255,255,0.82));
  font-weight: 920;
  font-size: 12.8px;
}

html[data-theme="light"] .fe-payments-yearhint{
  background: rgba(15,23,42,0.03);
  border-color: rgba(15,23,42,0.14);
  color: rgba(15,23,42,0.76);
}

.fe-payments-toggle{
  padding: 11px 16px;
}

.fe-payments-toggle i{
  transition: transform 0.32s ease;
}

.fe-payments-toggle[aria-expanded="true"] i{
  transform: rotate(180deg);
}

/* =========================================================
   TOPPERS GRID
========================================================= */
.fe-payments-toppergrid{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 680px){
  .fe-payments-toppergrid{ grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px){
  .fe-payments-toppergrid{ grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1320px){
  .fe-payments-toppergrid{ grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================
   TOPPER CARD (Base)
========================================================= */
.fe-payments-toppercard{
  padding: 16px;
  position: relative; /* required for ribbon positioning */
}

/* Top row */
.fe-payments-toppertop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* Avatar */
.fe-payments-avatar{
  width: 58px;
  height: 58px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--fe-border, rgba(255,255,255,0.14));
  background: rgba(255,255,255,0.06);
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
}

html[data-theme="light"] .fe-payments-avatar{
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.14);
}

.fe-payments-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

.fe-payments-avatar-fallback{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(168,85,247,0.22), rgba(59,130,246,0.14));
  position: relative;
  z-index: 1;
}

.fe-payments-avatar-fallback i{
  font-size: 20px;
  color: var(--fe-text, rgba(255,255,255,0.94));
}

html[data-theme="light"] .fe-payments-avatar-fallback i{
  color: rgba(15,23,42,0.90);
}

/* Avatar glow */
.fe-payments-avatar-glow{
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle, rgba(168,85,247,0.30), transparent 70%);
  opacity: 0;
  transition: opacity 0.32s ease;
  animation: fePayAvatarGlow 3s ease-in-out infinite;
}

.fe-payments-toppercard:hover .fe-payments-avatar-glow{
  opacity: 1;
}

/* Score badge */
.fe-payments-scorebadge{
  background: linear-gradient(135deg, rgba(236,72,153,0.20), rgba(168,85,247,0.14));
  border-color: rgba(236,72,153,0.32);
  box-shadow: 0 4px 14px rgba(236,72,153,0.18);
  white-space: nowrap; /* keeps A+/96% stable */
}

/* Name */
.fe-payments-toppername{
  margin: 0 0 11px;
  font-weight: 950;
  letter-spacing: -0.01em;
  font-size: 17.5px;
  color: var(--fe-text, rgba(255,255,255,0.94));
}

html[data-theme="light"] .fe-payments-toppername{
  color: rgba(15,23,42,0.94);
}

/* Chips */
.fe-payments-toppermeta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fe-payments-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border-radius: 999px;
  border: 1px solid var(--fe-border, rgba(255,255,255,0.14));
  background: rgba(255,255,255,0.05);
  color: var(--fe-text-muted, rgba(255,255,255,0.84));
  font-weight: 920;
  font-size: 12.8px;
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.fe-payments-chip:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(168,85,247,0.14);
}

html[data-theme="light"] .fe-payments-chip{
  background: rgba(15,23,42,0.03);
  border-color: rgba(15,23,42,0.14);
  color: rgba(15,23,42,0.78);
}

.fe-payments-chip i{
  color: rgba(168,85,247,0.95);
}

.fe-payments-chip-soft{
  background: linear-gradient(135deg, rgba(34,197,94,0.14), rgba(59,130,246,0.10));
}

html[data-theme="light"] .fe-payments-chip-soft{
  background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(59,130,246,0.08));
}

/* Footer */
.fe-payments-topperfoot{
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--fe-border, rgba(255,255,255,0.12));
}

html[data-theme="light"] .fe-payments-topperfoot{
  border-top-color: rgba(15,23,42,0.12);
}

.fe-payments-rankhint{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 920;
  color: var(--fe-text-muted, rgba(255,255,255,0.82));
  font-size: 13px;
}

html[data-theme="light"] .fe-payments-rankhint{
  color: rgba(15,23,42,0.76);
}

/* Collapse behavior (JS toggles) */
.fe-payments-toppercard.is-collapsed{ display: none; }

/* =========================================================
   RANK RIBBON + TOP 3 STYLING
========================================================= */
.fe-payments-rank-ribbon{
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 970;
  font-size: 12.5px;
  z-index: 3;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.20);
}

/* Ribbon variants */
.fe-payments-toppercard-gold .fe-payments-rank-ribbon{
  background: linear-gradient(135deg, rgba(251,191,36,0.90), rgba(245,158,11,0.80));
  border: 1px solid rgba(251,191,36,0.60);
  color: rgba(15,23,42,0.95);
}

.fe-payments-toppercard-silver .fe-payments-rank-ribbon{
  background: linear-gradient(135deg, rgba(226,232,240,0.90), rgba(203,213,225,0.85));
  border: 1px solid rgba(148,163,184,0.60);
  color: rgba(15,23,42,0.95);
}

.fe-payments-toppercard-bronze .fe-payments-rank-ribbon{
  background: linear-gradient(135deg, rgba(217,119,6,0.85), rgba(180,83,9,0.75));
  border: 1px solid rgba(217,119,6,0.60);
  color: rgba(255,255,255,0.98);
}

/* Top 3 card emphasis */
.fe-payments-toppercard-gold{
  border-color: rgba(251,191,36,0.38);
  box-shadow: 0 24px 70px rgba(251,191,36,0.28);
}

.fe-payments-toppercard-silver{
  border-color: rgba(148,163,184,0.35);
  box-shadow: 0 22px 65px rgba(148,163,184,0.24);
}

.fe-payments-toppercard-bronze{
  border-color: rgba(217,119,6,0.32);
  box-shadow: 0 20px 60px rgba(217,119,6,0.22);
}

/* =========================================================
   FIX: Ribbon overlap with score badge
   - Add "has-ribbon" class in PHP for rank <= 3
========================================================= */
.fe-payments-toppercard.has-ribbon{
  padding-top: 44px; /* reserves vertical room for the ribbon area */
}

.fe-payments-toppercard.has-ribbon .fe-payments-scorebadge{
  margin-right: 74px; /* keeps score badge away from ribbon zone */
}

@media (max-width: 520px){
  .fe-payments-toppercard.has-ribbon{ padding-top: 42px; }
  .fe-payments-toppercard.has-ribbon .fe-payments-scorebadge{ margin-right: 64px; }
}

@media (max-width: 380px){
  .fe-payments-toppercard.has-ribbon .fe-payments-scorebadge{ margin-right: 56px; }
}

/* =========================================================
   ANIMATIONS
========================================================= */
@keyframes fePayFadeUp{
  from{ opacity: 0; transform: translateY(40px); }
  to{ opacity: 1; transform: translateY(0); }
}

@keyframes fePayGradientFlow{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}

@keyframes fePayShimmer{
  0%,100%{ opacity: 1; }
  50%{ opacity: 0.88; }
}

@keyframes fePayShine{
  0%{ transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100%{ transform: translateX(100%) translateY(100%) rotate(45deg); }
}

@keyframes fePayFloatGlow{
  0%,100%{ transform: translateY(0) scale(1); opacity: 0.70; }
  50%{ transform: translateY(-12px) scale(1.06); opacity: 0.90; }
}

@keyframes fePayIconFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}

@keyframes fePayIconGlow{
  0%,100%{ opacity: 0; }
  50%{ opacity: 1; }
}

@keyframes fePayQrPulse{
  0%,100%{ opacity: 0.6; transform: scale(1); }
  50%{ opacity: 0.85; transform: scale(1.05); }
}

@keyframes fePayGentlePulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.01); }
}

@keyframes fePayBorderRotate{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}

@keyframes fePayBgPulse{
  0%,100%{ opacity: 1; transform: translateX(-50%) scale(1); }
  50%{ opacity: 0.85; transform: translateX(-50%) scale(1.05); }
}

@keyframes fePayAvatarGlow{
  0%,100%{ opacity: 0; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.15); }
}

/* =========================================================
   ACCESSIBILITY: Reduced motion
========================================================= */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .fe-payments-toppercard:hover{
    transform: none !important;
  }
}