/* Subscription color styles for badges and text */

/* Profile badges */
.profile-badge {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

.profile-badge.free {
  background: rgba(107, 114, 128, 0.12);
  color: #9ca3af;
}

.profile-badge.standard {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
}

.profile-badge.pro {
  background: rgba(139, 92, 246, 0.12);
  color: #a78bfa;
}

.profile-badge.premium {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}

/* Subscription text - with higher specificity */
.subscription-text,
#userSubscriptionDesktop,
#userSubscriptionMobile,
.text-gray-300 .subscription-text,
.text-gray-300 span.subscription-text,
.text-xs .subscription-text {
  font-weight: 600 !important;
}

.subscription-text.free,
span.subscription-text.free,
#userSubscriptionDesktop.free,
#userSubscriptionMobile.free,
.text-gray-300 .subscription-text.free,
.text-gray-300 span.subscription-text.free {
  color: #9ca3af !important;
  font-weight: 600 !important;
}

.subscription-text.standard,
span.subscription-text.standard,
#userSubscriptionDesktop.standard,
#userSubscriptionMobile.standard,
.text-gray-300 .subscription-text.standard,
.text-gray-300 span.subscription-text.standard {
  color: #60a5fa !important;
  font-weight: 600 !important;
}

.subscription-text.pro,
span.subscription-text.pro,
#userSubscriptionDesktop.pro,
#userSubscriptionMobile.pro,
.text-gray-300 .subscription-text.pro,
.text-gray-300 span.subscription-text.pro {
  color: #a78bfa !important;
  font-weight: 600 !important;
}

.subscription-text.premium,
span.subscription-text.premium,
#userSubscriptionDesktop.premium,
#userSubscriptionMobile.premium,
.text-gray-300 .subscription-text.premium,
.text-gray-300 span.subscription-text.premium {
  color: #fbbf24 !important;
  font-weight: 600 !important;
}

/* User subscription badges in header */
.user-subscription {
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

.user-subscription.free {
  color: #9ca3af;
}

.user-subscription.standard {
  color: #60a5fa;
}

.user-subscription.pro {
  color: #a78bfa;
}

.user-subscription.premium {
  color: #fbbf24;
}

/* Mobile subscription text */
.mobile-subscription-text.free {
  color: #9ca3af !important;
}

.mobile-subscription-text.standard {
  color: #60a5fa !important;
}

.mobile-subscription-text.pro {
  color: #a78bfa !important;
}

.mobile-subscription-text.premium {
  color: #fbbf24 !important;
}

/* Light theme overrides */
.light-theme .profile-badge.free {
  background: rgba(107, 114, 128, 0.2);
  color: #6b7280;
}

.light-theme .profile-badge.standard {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.light-theme .profile-badge.pro {
  background: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
}

.light-theme .profile-badge.premium {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

/* Light theme subscription text colors */
.light-theme .subscription-text.free,
.light-theme span.subscription-text.free,
.light-theme #userSubscriptionDesktop.free,
.light-theme #userSubscriptionMobile.free,
.light-theme .profile-dropdown .subscription-text.free {
  color: #6b7280 !important;
}

.light-theme .subscription-text.standard,
.light-theme span.subscription-text.standard,
.light-theme #userSubscriptionDesktop.standard,
.light-theme #userSubscriptionMobile.standard,
.light-theme .profile-dropdown .subscription-text.standard {
  color: #3b82f6 !important;
}

.light-theme .subscription-text.pro,
.light-theme span.subscription-text.pro,
.light-theme #userSubscriptionDesktop.pro,
.light-theme #userSubscriptionMobile.pro,
.light-theme .profile-dropdown .subscription-text.pro {
  color: #8b5cf6 !important;
}

.light-theme .subscription-text.premium,
.light-theme span.subscription-text.premium,
.light-theme #userSubscriptionDesktop.premium,
.light-theme #userSubscriptionMobile.premium,
.light-theme .profile-dropdown .subscription-text.premium {
  color: #f59e0b !important;
}

/* Override profile dropdown colors for subscription text */
.profile-dropdown .subscription-text.free {
  color: #9ca3af !important;
}

.profile-dropdown .subscription-text.standard {
  color: #60a5fa !important;
}

.profile-dropdown .subscription-text.pro {
  color: #a78bfa !important;
}

.profile-dropdown .subscription-text.premium {
  color: #fbbf24 !important;
}
/* Current plan button styles */
.plan-button.current-plan {
  background: rgba(156, 163, 175, 0.2) \!important;
  color: rgba(156, 163, 175, 0.8) \!important;
  border: 1px solid rgba(156, 163, 175, 0.3) \!important;
  cursor: not-allowed \!important;
  opacity: 0.8 \!important;
}

.plan-button.current-plan:hover {
  background: rgba(156, 163, 175, 0.2) \!important;
  transform: none \!important;
  box-shadow: none \!important;
}

.light-theme .plan-button.current-plan {
  background: rgba(156, 163, 175, 0.1) \!important;
  color: rgba(107, 114, 128, 0.8) \!important;
  border: 1px solid rgba(156, 163, 175, 0.2) \!important;
}


/* Free downgrade button styles (green for paid users) */
.plan-button.free-downgrade {
  background: linear-gradient(45deg, #22c55e, #10b981) \!important;
  color: white \!important;
  border: none \!important;
  cursor: pointer \!important;
  opacity: 1 \!important;
}

.plan-button.free-downgrade:hover {
  background: linear-gradient(45deg, #16a34a, #059669) \!important;
  transform: translateY(-2px) \!important;
  box-shadow: 0 10px 30px rgba(34, 197, 94, 0.3) \!important;
}

.light-theme .plan-button.free-downgrade {
  background: linear-gradient(45deg, #22c55e, #10b981) \!important;
  color: white \!important;
}