/**
 * Subscription Status Display Styles
 * Styles for showing subscription status in the header/UI
 */

/* Subscription status container */
.subscription-status {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  min-width: 200px;
  justify-content: center;
  text-align: center;
}

/* Active subscription status */
.subscription-status.active {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
  box-shadow: 0 2px 10px rgba(76, 175, 80, 0.3);
}

.subscription-status.active:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

/* Trial status */
.subscription-status.trial {
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  color: white;
  box-shadow: 0 2px 10px rgba(33, 150, 243, 0.3);
}

.subscription-status.trial:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(33, 150, 243, 0.4);
}

/* Expired status */
.subscription-status.expired {
  background: linear-gradient(135deg, #FF6B35 0%, #FF4444 100%);
  color: white;
  box-shadow: 0 2px 10px rgba(255, 107, 53, 0.3);
  animation: pulse-warning 2s infinite;
}

.subscription-status.expired:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
}

/* No auth status */
.subscription-status.no-auth {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
  color: white;
  opacity: 0.8;
}

/* Status text elements */
.subscription-active,
.trial-active,
.trial-expired,
.no-auth {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}

/* Icons within status */
.subscription-status i {
  font-size: 14px;
  opacity: 0.9;
}

/* Pulse animation for expired status */
@keyframes pulse-warning {
  0% {
    box-shadow: 0 2px 10px rgba(255, 107, 53, 0.3);
  }
  50% {
    box-shadow: 0 2px 15px rgba(255, 107, 53, 0.5);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 2px 10px rgba(255, 107, 53, 0.3);
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .subscription-status {
    min-width: 160px;
    font-size: 12px;
    padding: 5px 10px;
  }
  
  .subscription-status i {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .subscription-status {
    min-width: 120px;
    font-size: 11px;
    padding: 4px 8px;
  }
  
  /* Hide text on very small screens, show only icon and number */
  .subscription-active,
  .trial-active,
  .trial-expired {
    font-size: 11px;
  }
  
  /* Compact display for mobile */
  .subscription-status.active .subscription-active::after {
    content: none;
  }
}

/* Integration with existing header styles */
.header .subscription-status {
  margin-left: auto;
  margin-right: 15px;
}

.navbar .subscription-status {
  margin-left: auto;
  margin-right: 15px;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
  .subscription-status {
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .subscription-status.no-auth {
    background: linear-gradient(135deg, #495057 0%, #343a40 100%);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .subscription-status {
    border: 2px solid;
    font-weight: 600;
  }
  
  .subscription-status.active {
    border-color: #4CAF50;
  }
  
  .subscription-status.trial {
    border-color: #2196F3;
  }
  
  .subscription-status.expired {
    border-color: #FF6B35;
  }
}

/* Focus states for accessibility */
.subscription-status:focus-within {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* Loading state */
.subscription-status.loading {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: #6c757d;
  animation: skeleton-loading 1.5s ease-in-out infinite alternate;
}

@keyframes skeleton-loading {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.8;
  }
}