/* Demo Mode Specific Styles */

/* Demo mode banner */
#demo-mode-banner {
  animation: slideDown 0.3s ease-out;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Demo mode indicator badge */
.demo-mode-badge {
  background: linear-gradient(45deg, #f59e0b, #f97316);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.5px;
  margin-left: 8px;
  animation: pulse 2s infinite;
}

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

/* Disabled state for demo mode */
.demo-disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  position: relative;
}

.demo-disabled::after {
  content: "🎭 Demo";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(245, 158, 11, 0.9);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  z-index: 10;
}

/* Demo data styling */
.demo-data {
  position: relative;
}

.demo-data::before {
  content: "📊 Demo Data";
  position: absolute;
  top: -8px;
  right: -8px;
  background: #f59e0b;
  color: white;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 8px;
  font-weight: bold;
  z-index: 5;
}

/* Demo notification styles */
.demo-notification {
  animation: fadeInSlide 0.3s ease-out;
}

@keyframes fadeInSlide {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Demo mode warning overlay */
.demo-warning-overlay {
  background: rgba(245, 158, 11, 0.95);
  backdrop-filter: blur(4px);
  border: 2px solid #f97316;
}

/* Restricted button styles in demo mode */
.star-border.demo-restricted {
  position: relative;
  opacity: 0.7;
}

.star-border.demo-restricted::after {
  content: "🎭";
  position: absolute;
  top: -5px;
  right: -5px;
  background: #f59e0b;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  z-index: 10;
}

.star-border.demo-restricted:hover .star-border-content {
  background: rgba(245, 158, 11, 0.1) !important;
}

/* Demo mode status indicator */
.demo-status-indicator {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(45deg, #f59e0b, #f97316);
  color: white;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
  z-index: 1000;
  animation: pulse 2s infinite;
}

/* Mobile responsive demo banner */
@media (max-width: 768px) {
  #demo-mode-banner {
    font-size: 12px;
    padding: 8px 4px;
  }
  
  .demo-mode-badge {
    font-size: 8px;
    padding: 1px 4px;
  }
  
  .demo-status-indicator {
    bottom: 10px;
    right: 10px;
    font-size: 10px;
    padding: 6px 8px;
  }
}

/* Demo mode transitions */
.demo-fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.demo-slide-up {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}