/* CSS Reset and Global Styles */
body,
html {
    height: 100%;
}

.loading-progress {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
}

#blazor-error-ui {
    background: #fee2e2;
    color: #991b1b;
    bottom: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    display: none;
    left: 0;
    padding: 1rem;
    position: fixed;
    width: 100%;
    z-index: 5000;
}
@keyframes pop-in { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes pulse-glow { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes marquee-rtl { 0% { transform: translateX(0); } 100% { transform: translateX(50%); } }

/* ===================================
   🏪 MARKETPLACE ICON — Global Magic
   =================================== */
@keyframes store-float {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  25%       { transform: translateY(-4px) rotate(-3deg) scale(1.05); }
  50%       { transform: translateY(-7px) rotate(0deg) scale(1.08); }
  75%       { transform: translateY(-3px) rotate(3deg) scale(1.04); }
}

@keyframes store-glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.6)) drop-shadow(0 0 12px rgba(168, 85, 247, 0.4));
    color: #6366f1;
    transform: scale(1);
  }
  33% {
    filter: drop-shadow(0 0 12px rgba(236, 72, 153, 0.8)) drop-shadow(0 0 24px rgba(99, 102, 241, 0.5));
    color: #ec4899;
    transform: scale(1.1) rotate(5deg);
  }
  66% {
    filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.7)) drop-shadow(0 0 20px rgba(168, 85, 247, 0.45));
    color: #06b6d4;
    transform: scale(1.05) rotate(-5deg);
  }
}

@keyframes store-shimmer-ring {
  0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.6); }
  70%  { box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

@keyframes store-orbit {
  from { transform: rotate(0deg) translateX(14px) rotate(0deg); opacity: 0.7; }
  to   { transform: rotate(360deg) translateX(14px) rotate(-360deg); opacity: 0.4; }
}

@keyframes store-badge-pop {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ---- Wrapper container for the icon ---- */
.store-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- The actual icon inside any nav link or button ---- */
.fa-store.store-anim,
.fa-shop.store-anim {
  animation: store-float 3s ease-in-out infinite, store-glow-pulse 4s ease-in-out infinite;
  transition: transform 0.2s ease, filter 0.2s ease;
  cursor: pointer;
}

/* ---- Hovering ---- */
.fa-store.store-anim:hover,
.fa-shop.store-anim:hover {
  animation: none;
  transform: scale(1.25) rotate(-5deg) !important;
  filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.9)) drop-shadow(0 0 24px rgba(168, 85, 247, 0.6)) !important;
  color: #6366f1 !important;
}

/* ---- Sidebar / nav active state ---- */
.menu-item.active .fa-store.store-anim,
.menu-item.active .fa-shop.store-anim,
.nav-link-marketplace-premium.active .fa-store.store-anim,
.nav-item.active .fa-shop.store-anim,
.nav-item.active .fa-store.store-anim {
  animation: store-float 2s ease-in-out infinite, store-glow-pulse 2s ease-in-out infinite;
  color: white !important;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7)) !important;
}

/* ---- Mini sparkle dot orbiting the icon ---- */
.store-icon-wrap::after {
  content: '✦';
  position: absolute;
  top: -2px;
  right: -2px;
  font-size: 0.45rem;
  color: #f59e0b;
  animation: store-orbit 2.5s linear infinite;
  pointer-events: none;
  line-height: 1;
}

/* ---- Bottom nav special variant ---- */
.bottom-nav .nav-item:has(.fa-shop) .fa-shop,
.bottom-nav .nav-item:has(.fa-store) .fa-store {
  animation: store-float 3s ease-in-out infinite, store-glow-pulse 4s ease-in-out infinite;
}

/* ---- AdminDashboard big store icon ---- */
.fa-store.fa-2x.store-anim,
.fa-store.fa-3x.store-anim,
.fa-shop.fa-2x.store-anim {
  animation: store-float 3.5s ease-in-out infinite, store-glow-pulse 5s ease-in-out infinite;
}

/* ---- Page header title store icon ---- */
h2 .fa-store.store-anim, h3 .fa-store.store-anim, h4 .fa-store.store-anim,
h2 .fa-shop.store-anim, h3 .fa-shop.store-anim {
  animation: store-float 3s ease-in-out infinite, store-glow-pulse 3.5s ease-in-out infinite;
  vertical-align: middle;
}