/*!
 * Flux MarketPlace — media fallback / placeholder styles.
 * Clean dark/neon placeholders so broken images never show alt text or the
 * browser's broken-image icon.
 */

/* Real images: consistent cover crop so cards never distort. */
.product-card img,
.card-img-top,
.card-img,
.product-image,
#productImage,
.vinyl-cover {
  object-fit: cover;
}

/* Shared placeholder block (products / covers). */
.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 120px;
  box-sizing: border-box;
  color: #7dd3fc;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(14, 165, 233, 0.18), transparent 60%),
    radial-gradient(120% 120% at 100% 100%, rgba(139, 92, 246, 0.20), transparent 55%),
    linear-gradient(135deg, #0b1220 0%, #0a0a14 100%);
  border: 1px solid rgba(125, 211, 252, 0.12);
  overflow: hidden;
}

.media-placeholder--product {
  border-radius: inherit;
}

.media-placeholder__icon {
  display: inline-flex;
  opacity: 0.75;
  filter: drop-shadow(0 0 10px rgba(14, 165, 233, 0.35));
}

/* Avatar initials placeholder (circular). */
.media-placeholder--avatar {
  min-height: 0;
  border-radius: 50%;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #e2f2ff;
  text-transform: uppercase;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(56, 189, 248, 0.55), transparent 60%),
    linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  border: 1px solid rgba(125, 211, 252, 0.25);
}

/* When an avatar <img> itself becomes the fallback container (no wrapper),
   give the inline placeholder a sensible default size. */
.media-placeholder--avatar:not([style*="width"]) {
  width: 96px;
  height: 96px;
  font-size: 32px;
}

.image-fallback-active {
  animation: fluxMediaFadeIn 0.18s ease-out;
}

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