/* ===== THEME TRANSITION STYLES ===== */

/* Smooth theme transition */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Theme toggle button animation */
.theme-toggle i {
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[data-theme="dark"] .theme-toggle i {
  transform: rotate(360deg);
}

/* Gradient transitions */
.modern-hero {
  transition: background 0.5s ease;
}

/* Product card theme transitions */
.product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Modal backdrop transition */
.modal-overlay {
  transition: opacity 0.3s ease;
}

/* Cart sidebar transition */
.cart-sidebar {
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Loading spinner color transition */
.loading-spinner {
  transition: border-color 0.3s ease;
}

/* Button hover transitions with theme */
.btn-add-cart,
.btn-buy-now,
.btn-advanced-search {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Filter select transitions */
.filter-select {
  transition: all 0.2s ease;
}

/* Price slider thumb transition */
.price-slider input[type="range"]::-webkit-slider-thumb {
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Rating stars color transition */
.rating-stars {
  transition: color 0.3s ease;
}

/* Toast notification theme transition */
.toast {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Product stock indicator transitions */
.product-stock {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Mobile menu backdrop */
.mobile-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-modal) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-menu-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Theme-specific gradients */
[data-theme="light"] .floating-product {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
}

[data-theme="dark"] .floating-product {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}

/* Theme-aware shadows */
[data-theme="dark"] .hero-wave {
  color: #0f172a;
}