/* ========================================
   LOYALTY BADGES
   Reusable account loyalty tier badges
   ======================================== */

.loyalty-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--arp-radius-full);
  font-size: var(--bulma-size-small);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.loyalty-new {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #059669;
  border: 1px solid #6ee7b7;
}

[data-theme="dark"] .loyalty-new {
  background: linear-gradient(135deg, #064e3b 0%, #047857 100%);
  color: #6ee7b7;
  border-color: #047857;
}

.loyalty-bronze {
  background: linear-gradient(135deg, #fef3e2 0%, #fed7aa 100%);
  color: #9a3412;
  border: 1px solid #fdba74;
}

[data-theme="dark"] .loyalty-bronze {
  background: linear-gradient(135deg, #431407 0%, #7c2d12 100%);
  color: #fdba74;
  border-color: #9a3412;
}

.loyalty-silver {
  background: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%);
  color: #334155;
  border: 1px solid #94a3b8;
}

[data-theme="dark"] .loyalty-silver {
  background: linear-gradient(135deg, #334155 0%, #475569 100%);
  color: #e2e8f0;
  border-color: #64748b;
}

.loyalty-gold {
  background: linear-gradient(135deg, #fef9c3 0%, #fde047 100%);
  color: #854d0e;
  border: 1px solid #facc15;
}

[data-theme="dark"] .loyalty-gold {
  background: linear-gradient(135deg, #422006 0%, #713f12 100%);
  color: #fde047;
  border-color: #a16207;
}

.loyalty-platinum {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  color: #312e81;
  border: 1px solid #818cf8;
}

[data-theme="dark"] .loyalty-platinum {
  background: linear-gradient(135deg, #312e81 0%, #4338ca 100%);
  color: #e0e7ff;
  border-color: #6366f1;
}

/* Navbar responsive visibility - mobile shows in brand, desktop shows in navbar-end */
.navbar-brand .loyalty-badge-container {
  display: flex;
}

.navbar-menu .loyalty-badge-container {
  display: none;
}

@media screen and (min-width: 1024px) {
  .navbar-brand .loyalty-badge-container {
    display: none;
  }

  .navbar-menu .loyalty-badge-container {
    display: flex;
  }
}