/*
 * Ad Card Component - Enhanced Dark Mode Support
 * Provides comprehensive dark/light mode styling for modern-ad-card component
 */

/* ===================================== */
/* LIGHT MODE - Base Styles */
/* ===================================== */

.modern-ad-card {
  background: #ffffff;
  border-color: rgba(75, 49, 94, 0.08);
  box-shadow: 0 4px 20px rgba(75, 49, 94, 0.12);
}

.modern-ad-card:hover {
  border-color: #4b315e;
  box-shadow: 0 12px 40px rgba(75, 49, 94, 0.18);
}

/* Image Placeholder - Light Mode */
.ad-image-placeholder {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  color: #6c757d;
}

/* Content Section - Light Mode */
.ad-content {
  background: #ffffff;
}

/* Category Badge - Light Mode */
.ad-category-badge {
  background: linear-gradient(135deg, rgba(75, 49, 94, 0.08), rgba(255, 96, 1, 0.08));
  border-color: rgba(75, 49, 94, 0.15);
  color: #4b315e;
}

.ad-category-badge:hover {
  background: linear-gradient(135deg, rgba(75, 49, 94, 0.12), rgba(255, 96, 1, 0.12));
}

/* Title - Light Mode */
.ad-title a {
  color: #1e293b;
}

.ad-title a:hover {
  color: #4b315e;
}

/* Location - Light Mode */
.ad-location {
  color: #64748b;
}

.ad-location i {
  color: #4b315e;
}

/* Description - Light Mode */
.ad-description {
  color: #64748b;
}

/* Feature Tags - Light Mode */
.feature-tag {
  background: rgba(75, 49, 94, 0.05);
  color: #4b315e;
  border-color: rgba(75, 49, 94, 0.1);
}

.feature-tag:hover {
  background: rgba(75, 49, 94, 0.1);
  border-color: rgba(75, 49, 94, 0.2);
}

.new-feature {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.1));
  color: #3b82f6;
  border-color: rgba(59, 130, 246, 0.2);
}

.video-feature {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1));
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.2);
}

.gallery-feature {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(147, 51, 234, 0.1));
  color: #a855f7;
  border-color: rgba(168, 85, 247, 0.2);
}

.featured-feature {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.1));
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.2);
}

/* Price Section - Light Mode */
.ad-price-box {
  background: linear-gradient(135deg, rgba(75, 49, 94, 0.03), rgba(255, 96, 1, 0.03));
  border-color: rgba(75, 49, 94, 0.1);
}

.modern-ad-card:hover .ad-price-box {
  background: linear-gradient(135deg, rgba(75, 49, 94, 0.06), rgba(255, 96, 1, 0.06));
  border-color: rgba(75, 49, 94, 0.2);
}

.price-label {
  color: #64748b;
}

.price-amount {
  color: #1e293b;
}

.currency {
  color: #64748b;
}

.original-price {
  color: #94a3b8;
}

/* Footer - Light Mode */
.ad-footer {
  background: linear-gradient(135deg, rgba(248, 249, 250, 0.8), rgba(255, 255, 255, 0.6));
  border-top-color: rgba(75, 49, 94, 0.1);
}

.author-name {
  color: #1e293b;
}

.author-meta {
  color: #64748b;
}

.post-time {
  color: #94a3b8;
}

/* Badges - Light Mode */
.ad-badge {
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.urgent-badge {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(220, 38, 38, 0.95));
  color: white;
}

.pinned-badge {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.95));
  color: white;
}

.highlighted-badge {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.95), rgba(217, 119, 6, 0.95));
  color: white;
}

/* Quick Actions - Light Mode */
.quick-action-btn {
  background: rgba(255, 255, 255, 0.9);
  color: #4b315e;
  border: 1px solid rgba(75, 49, 94, 0.1);
}

.quick-action-btn:hover {
  background: rgba(255, 255, 255, 1);
  color: #ff6001;
  border-color: rgba(255, 96, 1, 0.3);
  box-shadow: 0 4px 12px rgba(75, 49, 94, 0.15);
}

.quick-action-btn.active {
  background: linear-gradient(135deg, #4b315e, #ff6001);
  color: white;
  border-color: transparent;
}

/* ===================================== */
/* DARK MODE - Enhanced Styles */
/* ===================================== */

[data-theme='dark'] .modern-ad-card {
  background: #1e1e2e;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

[data-theme='dark'] .modern-ad-card:hover {
  border-color: #ff6001;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
}

/* Image Placeholder - Dark Mode */
[data-theme='dark'] .ad-image-placeholder {
  background: linear-gradient(135deg, #2a2a3e, #1e1e2e);
  color: #6c7086;
}

/* Content Section - Dark Mode */
[data-theme='dark'] .ad-content {
  background: #1e1e2e;
}

/* Category Badge - Dark Mode */
[data-theme='dark'] .ad-category-badge {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 96, 1, 0.08));
  border-color: rgba(255, 255, 255, 0.15);
  color: #cdd6f4;
}

[data-theme='dark'] .ad-category-badge:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 96, 1, 0.12));
}

/* Title - Dark Mode */
[data-theme='dark'] .ad-title a {
  color: #cdd6f4;
}

[data-theme='dark'] .ad-title a:hover {
  color: #ff6001;
  text-shadow: 0 0 10px rgba(255, 96, 1, 0.3);
}

/* Location - Dark Mode */
[data-theme='dark'] .ad-location {
  color: #9399b2;
}

[data-theme='dark'] .ad-location i {
  color: #ff6001;
}

/* Description - Dark Mode */
[data-theme='dark'] .ad-description {
  color: #9399b2;
}

/* Feature Tags - Dark Mode */
[data-theme='dark'] .feature-tag {
  background: rgba(255, 255, 255, 0.05);
  color: #cdd6f4;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme='dark'] .feature-tag:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme='dark'] .new-feature {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.15));
  color: #89b4fa;
  border-color: rgba(59, 130, 246, 0.3);
}

[data-theme='dark'] .video-feature {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.15));
  color: #f38ba8;
  border-color: rgba(239, 68, 68, 0.3);
}

[data-theme='dark'] .gallery-feature {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(147, 51, 234, 0.15));
  color: #cba6f7;
  border-color: rgba(168, 85, 247, 0.3);
}

[data-theme='dark'] .featured-feature {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.15));
  color: #f9e2af;
  border-color: rgba(245, 158, 11, 0.3);
}

/* Price Section - Dark Mode */
[data-theme='dark'] .ad-price-box {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 96, 1, 0.05));
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme='dark'] .modern-ad-card:hover .ad-price-box {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 96, 1, 0.08));
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme='dark'] .price-label {
  color: #9399b2;
}

[data-theme='dark'] .price-amount {
  color: #cdd6f4;
  background: linear-gradient(135deg, #ff6001, #f9e2af);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme='dark'] .currency {
  color: #9399b2;
}

[data-theme='dark'] .original-price {
  color: #6c7086;
}

/* Footer - Dark Mode */
[data-theme='dark'] .ad-footer {
  background: linear-gradient(135deg, rgba(30, 30, 46, 0.8), rgba(40, 40, 60, 0.6));
  border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme='dark'] .author-name {
  color: #cdd6f4;
}

[data-theme='dark'] .author-meta {
  color: #9399b2;
}

[data-theme='dark'] .post-time {
  color: #6c7086;
}

/* Badges - Dark Mode */
[data-theme='dark'] .ad-badge {
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme='dark'] .urgent-badge {
  background: linear-gradient(135deg, rgba(239, 68, 68, 1), rgba(220, 38, 38, 1));
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

[data-theme='dark'] .pinned-badge {
  background: linear-gradient(135deg, rgba(59, 130, 246, 1), rgba(37, 99, 235, 1));
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

[data-theme='dark'] .highlighted-badge {
  background: linear-gradient(135deg, rgba(245, 158, 11, 1), rgba(217, 119, 6, 1));
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

/* Quick Actions - Dark Mode */
[data-theme='dark'] .quick-action-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #cdd6f4;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme='dark'] .quick-action-btn:hover {
  background: rgba(255, 96, 1, 0.15);
  color: #ff6001;
  border-color: rgba(255, 96, 1, 0.3);
  box-shadow: 0 4px 12px rgba(255, 96, 1, 0.3);
}

[data-theme='dark'] .quick-action-btn.active {
  background: linear-gradient(135deg, #ff6001, #f9e2af);
  color: #1e1e2e;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(255, 96, 1, 0.4);
}

/* Buyer Safety Note - Dark Mode */
[data-theme='dark'] .buyer-safety-note {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.25), rgba(118, 75, 162, 0.25));
  border: 1px solid rgba(102, 126, 234, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-theme='dark'] .buyer-safety-note:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

[data-theme='dark'] .buyer-safety-note.warning {
  background: linear-gradient(135deg, rgba(240, 147, 251, 0.25), rgba(245, 87, 108, 0.25));
  border-color: rgba(240, 147, 251, 0.3);
}

[data-theme='dark'] .buyer-safety-note.success {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.25), rgba(0, 242, 254, 0.25));
  border-color: rgba(79, 172, 254, 0.3);
}

[data-theme='dark'] .buyer-safety-note.info {
  background: linear-gradient(135deg, rgba(67, 233, 123, 0.25), rgba(56, 249, 215, 0.25));
  border-color: rgba(67, 233, 123, 0.3);
}

/* Report Link - Dark Mode */
[data-theme='dark'] .report-btn {
  color: #6c7086;
}

[data-theme='dark'] .report-btn:hover {
  color: #f38ba8;
  background-color: rgba(243, 139, 168, 0.15);
}

/* Quote Box - Dark Mode */
[data-theme='dark'] .ad-quote-box {
  background: linear-gradient(135deg, rgba(240, 147, 251, 0.3), rgba(245, 87, 108, 0.3));
  border: 1px solid rgba(240, 147, 251, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme='dark'] .ad-quote-box:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* Status Badges - Dark Mode */
[data-theme='dark'] .status-active {
  background: linear-gradient(135deg, rgba(34, 197, 94, 1), rgba(22, 163, 74, 1));
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

[data-theme='dark'] .status-pending {
  background: linear-gradient(135deg, rgba(245, 158, 11, 1), rgba(217, 119, 6, 1));
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

[data-theme='dark'] .status-sold {
  background: linear-gradient(135deg, rgba(239, 68, 68, 1), rgba(220, 38, 38, 1));
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

/* Verification and Company Badges - Dark Mode */
[data-theme='dark'] .verification-badge {
  background: linear-gradient(135deg, rgba(16, 185, 129, 1), rgba(5, 150, 105, 1));
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
}

[data-theme='dark'] .company-badge {
  background: linear-gradient(135deg, #ff6001, #f9e2af);
  box-shadow: 0 2px 6px rgba(255, 96, 1, 0.4);
}

/* ===================================== */
/* TRANSITIONS & ANIMATIONS */
/* ===================================== */

.modern-ad-card,
.ad-category-badge,
.feature-tag,
.quick-action-btn,
.ad-price-box,
.ad-badge,
.author-avatar {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ad-image {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
}

/* Smooth theme switching */
@media (prefers-reduced-motion: no-preference) {
  * {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
  }
}

/* ===================================== */
/* RESPONSIVE ADJUSTMENTS */
/* ===================================== */

@media (max-width: 768px) {
  .modern-ad-card {
    border-radius: 15px;
  }

  [data-theme='dark'] .modern-ad-card {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  }

  [data-theme='dark'] .modern-ad-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  }

  .quick-action-btn {
    width: 36px;
    height: 36px;
  }

  [data-theme='dark'] .quick-action-btn:hover {
    box-shadow: 0 3px 10px rgba(255, 96, 1, 0.4);
  }
}

/* ===================================== */
/* ACCESSIBILITY ENHANCEMENTS */
/* ===================================== */

/* Focus states for keyboard navigation */
.modern-ad-card:focus-within {
  outline: 2px solid var(--primary-color, #4b315e);
  outline-offset: 2px;
}

[data-theme='dark'] .modern-ad-card:focus-within {
  outline-color: #ff6001;
}

.quick-action-btn:focus-visible {
  outline: 2px solid var(--primary-color, #4b315e);
  outline-offset: 2px;
}

[data-theme='dark'] .quick-action-btn:focus-visible {
  outline-color: #ff6001;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .modern-ad-card {
    border-width: 2px;
  }

  [data-theme='dark'] .modern-ad-card {
    border-color: rgba(255, 255, 255, 0.3);
  }

  .ad-badge,
  .quick-action-btn {
    border-width: 2px;
  }
}