/* ====================================
   PIXELNEST CARD SYSTEM
   Modern, Consistent Card Styling
   ==================================== */

/* Base Card Styles */
.card {
  position: relative;
  background: white;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Dark Mode Base */
.dark .card {
  background: #1e293b;
  border-color: #334155;
}

/* Card Sizes */
.card-sm {
  border-radius: 0.75rem;
  padding: 1rem;
}

.card-md {
  border-radius: 1rem;
  padding: 1.25rem;
}

.card-lg {
  border-radius: 1.25rem;
  padding: 1.5rem;
}

.card-xl {
  border-radius: 1.5rem;
  padding: 2rem;
}

/* Card Elevations (Shadows) */
.card-flat {
  box-shadow: none;
  border: 1px solid #e2e8f0;
}

.dark .card-flat {
  border-color: #334155;
}

.card-elevated {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.dark .card-elevated {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
}

.card-floating {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.dark .card-floating {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
}

.card-lifted {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.dark .card-lifted {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
}

/* Hover Effects */
.card-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.dark .card-hover-lift:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}

.card-hover-glow:hover {
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.3), 0 10px 15px -3px rgba(139, 92, 246, 0.2);
}

.dark .card-hover-glow:hover {
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.5), 0 10px 15px -3px rgba(167, 139, 250, 0.3);
}

.card-hover-scale:hover {
  transform: scale(1.02);
}

.card-hover-border:hover {
  border-color: #a78bfa;
}

.dark .card-hover-border:hover {
  border-color: #8b5cf6;
}

/* Interactive Cards */
.card-interactive {
  cursor: pointer;
  user-select: none;
}

.card-interactive:active {
  transform: scale(0.98);
}

/* Card Variants */
.card-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.dark .card-gradient {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(51, 65, 85, 0.8);
}

.card-glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark .card-glass {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(51, 65, 85, 0.5);
}

.card-premium {
  background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
  border: 1px solid #c7d2fe;
}

.dark .card-premium {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  border: 1px solid #4c1d95;
}

/* Color Variants */
.card-primary {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  border: 1px solid #c4b5fd;
}

.dark .card-primary {
  background: linear-gradient(135deg, #2e1065 0%, #4c1d95 100%);
  border: 1px solid #6d28d9;
}

.card-success {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  border: 1px solid #86efac;
}

.dark .card-success {
  background: linear-gradient(135deg, #14532d 0%, #166534 100%);
  border: 1px solid #15803d;
}

.card-warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #fcd34d;
}

.dark .card-warning {
  background: linear-gradient(135deg, #713f12 0%, #854d0e 100%);
  border: 1px solid #a16207;
}

.card-danger {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border: 1px solid #fca5a5;
}

.dark .card-danger {
  background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
  border: 1px solid #b91c1c;
}

.card-info {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border: 1px solid #93c5fd;
}

.dark .card-info {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  border: 1px solid #2563eb;
}

/* Card Header */
.card-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.5) 0%, transparent 100%);
}

.dark .card-header {
  border-bottom-color: #334155;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.5) 0%, transparent 100%);
}

.card-header-compact {
  padding: 1rem 1.25rem;
}

.card-header-large {
  padding: 1.5rem 2rem;
}

/* Card Body */
.card-body {
  padding: 1.5rem;
}

.card-body-compact {
  padding: 1rem;
}

.card-body-spacious {
  padding: 2rem;
}

/* Card Footer */
.card-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid #e2e8f0;
  background: linear-gradient(0deg, rgba(248, 250, 252, 0.5) 0%, transparent 100%);
}

.dark .card-footer {
  border-top-color: #334155;
  background: linear-gradient(0deg, rgba(15, 23, 42, 0.5) 0%, transparent 100%);
}

/* Special Effects */
.card-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
}

.card-shimmer:hover::before {
  left: 100%;
}

.dark .card-shimmer::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
}

/* Card Badge Positions */
.card-badge-top-right {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
}

.card-badge-top-left {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10;
}

.card-badge-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

/* Responsive Card Grid */
.card-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.card-grid-compact {
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.card-grid-spacious {
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* Card Loading State */
.card-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.card-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  animation: loading-shimmer 1.5s infinite;
}

.dark .card-loading::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
}

@keyframes loading-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Card Divider */
.card-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #e2e8f0 10%,
    #e2e8f0 90%,
    transparent 100%
  );
  margin: 1.25rem 0;
}

.dark .card-divider {
  background: linear-gradient(
    90deg,
    transparent 0%,
    #334155 10%,
    #334155 90%,
    transparent 100%
  );
}

/* Video Card Specific */
.video-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.video-card-thumbnail {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  border-radius: 0.75rem 0.75rem 0 0;
}

.video-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
}

/* Stats Card */
.stats-card {
  position: relative;
  overflow: hidden;
}

.stats-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
  transform: translate(30%, -30%);
  pointer-events: none;
}

.dark .stats-card::before {
  background: radial-gradient(circle, rgba(167, 139, 250, 0.1) 0%, transparent 70%);
}

/* Feature Card */
.feature-card {
  text-align: center;
  padding: 2rem;
}

.feature-card-icon {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  box-shadow: 0 8px 16px -4px rgba(139, 92, 246, 0.4);
}

.dark .feature-card-icon {
  box-shadow: 0 8px 16px -4px rgba(139, 92, 246, 0.6);
}

/* Pricing Card */
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all 0.3s ease;
}

.pricing-card-popular {
  transform: scale(1.05);
  box-shadow: 0 20px 25px -5px rgba(139, 92, 246, 0.2), 0 8px 10px -6px rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
}

.dark .pricing-card-popular {
  box-shadow: 0 20px 25px -5px rgba(167, 139, 250, 0.3), 0 8px 10px -6px rgba(167, 139, 250, 0.3);
  border-color: #a78bfa;
}

/* Notification Card */
.notification-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border-left: 4px solid #8b5cf6;
}

.notification-card-success {
  border-left-color: #10b981;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.05) 0%, transparent 100%);
}

.notification-card-warning {
  border-left-color: #f59e0b;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.05) 0%, transparent 100%);
}

.notification-card-danger {
  border-left-color: #ef4444;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0%, transparent 100%);
}

.notification-card-info {
  border-left-color: #3b82f6;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, transparent 100%);
}

/* Compact Card for Sidebar/Widget */
.compact-card {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
}

/* Mobile Responsive Adjustments */
@media (max-width: 640px) {
  .card-sm, .card-md, .card-lg, .card-xl {
    padding: 1rem;
    border-radius: 0.75rem;
  }
  
  .card-header, .card-footer {
    padding: 1rem;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  .card-grid, .card-grid-compact, .card-grid-spacious {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .pricing-card-popular {
    transform: none;
  }
}

/* Tablet Responsive */
@media (min-width: 641px) and (max-width: 1024px) {
  .card-grid, .card-grid-spacious {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

/* Animation Utilities */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-animate-in {
  animation: fadeInUp 0.4s ease-out forwards;
}

/* Accessibility */
.card-interactive:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 2px;
}

.dark .card-interactive:focus-visible {
  outline-color: #a78bfa;
}

/* Print Styles */
@media print {
  .card {
    border: 1px solid #000;
    box-shadow: none;
    page-break-inside: avoid;
  }
  
  .card-hover-lift,
  .card-hover-glow,
  .card-hover-scale,
  .card-interactive {
    transform: none !important;
  }
}