/* MUTA v244 - 09-phase-e-trust-mobile-empty.css - PHASE E - Trust + Mobile + Empty - Stats Bar + Trust Badges + Logo Wall + Bottom Nav Detents + Empty Illustrations + Logo Morph Loader */
/* Best of موتا مارکت trust + هوشمند logo wall + هوشمند detents + هوشمند empty + Apple logo morph */
/* Only transform+opacity, GPU, no jump, 0 !important */

/* ==================== STATS BAR - موتا مارکت + هوشمند COUNTER ==================== */

#heroStatsBar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  padding: 12px 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  animation: appleSlideUp 500ms cubic-bezier(.16,1,.3,1) 200ms both;
  contain: layout style paint;
}
#heroStatsBar .stat-item{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-dim);
  transition: transform 200ms cubic-bezier(.16,1,.3,1), color 200ms ease;
  will-change: transform;
}
#heroStatsBar .stat-item:hover{
  transform: translateY(-1px) scale(1.02);
  color: var(--text);
}
#heroStatsBar .stat-item .si-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--up);
  animation: premiumPulseDot 2s ease infinite;
}
#heroStatsBar .stat-item .si-value{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--text);
  transition: transform 200ms cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
#heroStatsBar .stat-item:hover .si-value{
  transform: scale(1.08);
}
#heroStatsBar .stat-sep{
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
}
@media (max-width: 600px){
  #heroStatsBar .stat-sep{ display: none; }
  #heroStatsBar{ gap: 8px; }
}

/* ==================== TRUST BADGES ENHANCED - موتا مارکت 7-DAY + EXPRESS ==================== */

#heroTrustBadges.enhanced{
  gap: 10px;
  margin: 18px 0;
}
#heroTrustBadges.enhanced .trust-badge{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 8px 14px;
  font-size: .76rem;
  font-weight: 700;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  transition: transform 250ms cubic-bezier(.16,1,.3,1), background 200ms ease, border-color 200ms ease, box-shadow 250ms ease;
  will-change: transform;
}
#heroTrustBadges.enhanced .trust-badge::before{
  content:'';
  position: absolute;
  inset:0;
  background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(212,175,55,.10), transparent 40%);
  opacity:0;
  transition: opacity 300ms ease;
  pointer-events:none;
  will-change: opacity;
  z-index:0;
}
#heroTrustBadges.enhanced .trust-badge:hover::before{
  opacity:1;
}
#heroTrustBadges.enhanced .trust-badge:hover{
  transform: translateY(-3px) scale(1.03);
  background: rgba(255,255,255,.06);
  border-color: rgba(212,175,55,.20);
  box-shadow: 0 8px 24px rgba(0,0,0,.16), 0 0 0 1px rgba(212,175,55,.10);
}
#heroTrustBadges.enhanced .trust-badge.live{
  background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(16,185,129,.06));
  border-color: rgba(16,185,129,.24);
  color: #10b981;
}
#heroTrustBadges.enhanced .trust-badge.gold{
  background: linear-gradient(135deg, rgba(212,175,55,.14), rgba(212,175,55,.06));
  border-color: rgba(212,175,55,.24);
  color: var(--gold);
}
#heroTrustBadges.enhanced .trust-badge .tb-check{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: currentColor;
  color: #000;
  font-size: .62rem;
  font-weight: 900;
  flex-shrink: 0;
}

/* ==================== LOGO WALL ENHANCED - هوشمند ENTERPRISE + INFINITE SCROLL ==================== */

#heroLogoWall.enhanced{
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.01);
  margin: 20px 0;
  overflow: hidden;
  position: relative;
}
#heroLogoWall.enhanced::before,
#heroLogoWall.enhanced::after{
  content:'';
  position: absolute;
  top:0; bottom:0;
  width: 80px;
  pointer-events:none;
  z-index:1;
}
#heroLogoWall.enhanced::before{
  left:0;
  background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}
#heroLogoWall.enhanced::after{
  right:0;
  background: linear-gradient(-90deg, var(--bg) 0%, transparent 100%);
}
#heroLogoWall.enhanced .lw-logos{
  gap: 32px;
  animation: logoWallScroll 40s linear infinite;
  will-change: transform;
  width: max-content;
}
#heroLogoWall.enhanced:hover .lw-logos{
  animation-play-state: paused;
}
@keyframes logoWallScroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
#heroLogoWall.enhanced .lw-logo{
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text-faint);
  opacity:.5;
  filter: grayscale(1) brightness(1.2);
  transition: transform 250ms cubic-bezier(.16,1,.3,1), opacity 200ms ease, filter 200ms ease, color 200ms ease;
  will-change: transform;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid transparent;
}
#heroLogoWall.enhanced .lw-logo:hover{
  transform: translateY(-3px) scale(1.08);
  opacity:1;
  filter: grayscale(0) brightness(1);
  color: var(--text);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.06);
}
#heroLogoWall.enhanced .lw-logo .lw-icon{
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
}

/* ==================== BOTTOM NAV DETENTS - APPLE MAPS + هوشمند 3 SNAP ==================== */

#mainNav.mobile-nav.detents{
  /* Apple Maps detents + CSS scroll snap */
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#mainNav.mobile-nav.detents .detent{
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
#mainNav.mobile-nav.detents::before{
  /* Handle bar already exists, enhance with detent indicators */
  width: 48px;
  background: rgba(255,255,255,.32);
}

/* Detent positions: 20% 50% 90% - via JS setting height */
#mainNav.mobile-nav.detent-20{
  height: 20vh;
  max-height: 20vh;
  top: auto;
  bottom:0;
  border-radius: 24px 24px 0 0;
}
#mainNav.mobile-nav.detent-50{
  height: 50vh;
  max-height: 50vh;
}
#mainNav.mobile-nav.detent-90{
  height: 90vh;
  max-height: 90vh;
  height: calc(100dvh - 56px);
  max-height: calc(100dvh - 56px);
}

/* ==================== FLOATED BOTTOM BAR ENHANCED - هوشمند + 2026 BOTTOM NAV ==================== */

#floatedBottomBar.enhanced{
  height: 72px;
  border-radius: 28px;
  padding: 0 12px;
  gap: 4px;
  box-shadow: 0 16px 40px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.06), 0 0 24px rgba(212,175,55,.08);
}
#floatedBottomBar.enhanced .fbb-item{
  min-width: 62px;
  padding: 8px 16px;
  border-radius: 20px;
  gap: 3px;
}
#floatedBottomBar.enhanced .fbb-item .fbb-icon{
  font-size: 1.3rem;
}
#floatedBottomBar.enhanced .fbb-item .fbb-label{
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
#floatedBottomBar.enhanced .fbb-fab{
  width: 52px; height: 52px;
  border-radius: 18px;
  font-size: 1.5rem;
  box-shadow: 0 10px 28px rgba(212,175,55,.36), 0 0 0 1px rgba(212,175,55,.20);
}

/* ==================== EMPTY ILLUSTRATIONS - هوشمند + موتا مارکت ==================== */

.empty-state{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  animation: appleFadeIn 500ms ease both;
  contain: layout style paint;
}
.empty-state .empty-illustration{
  width: 120px; height: 120px;
  margin-bottom: 20px;
  position: relative;
  animation: emptyFloat 3s ease-in-out infinite;
  will-change: transform;
}
@keyframes emptyFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
.empty-state .empty-illustration svg{
  width: 100%; height: 100%;
  filter: drop-shadow(0 8px 24px rgba(212,175,55,.12));
}
.empty-state .empty-title{
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -.02em;
  margin-bottom: 8px;
  color: var(--text);
}
.empty-state .empty-desc{
  font-size: .88rem;
  color: var(--text-dim);
  line-height: 1.7;
  max-width: 320px;
  margin-bottom: 20px;
}
.empty-state .empty-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--gold);
  color: #000;
  border-radius: 12px;
  font-weight: 700;
  font-size: .84rem;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(.16,1,.3,1), box-shadow 200ms ease;
  will-change: transform;
  box-shadow: 0 4px 16px rgba(212,175,55,.20);
}
.empty-state .empty-cta:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 24px rgba(212,175,55,.28);
}
.empty-state .empty-cta:active{
  transform: scale(.96);
}

/* Specific empty states */
#marketGrid:empty::before,
#forexGrid:empty::before,
#iranAssetsGrid:empty::before,
#newsGrid:empty::before,
#calendarGrid:empty::before{
  content:'در حال دریافت زنده...';
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: var(--text-faint);
  font-size: .88rem;
  grid-column: 1 / -1;
}

/* ==================== LOGO MORPH LOADER - موتا مارکت + APPLE ==================== */

#logoMorphLoader{
  position: fixed;
  inset:0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  z-index: 9999;
  opacity:1;
  transition: opacity 500ms cubic-bezier(.4,0,.2,1), transform 500ms cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
  contain: layout style paint;
}
#logoMorphLoader.hidden{
  opacity:0;
  transform: scale(1.05);
  pointer-events: none;
}
#logoMorphLoader .lml-logo{
  width: 80px; height: 80px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 2.2rem;
  color: #000;
  box-shadow: 0 0 0 1px rgba(212,175,55,.20), 0 16px 40px rgba(212,175,55,.24), 0 0 80px rgba(212,175,55,.16);
  animation: logoMorph 2s cubic-bezier(.16,1,.3,1) infinite;
  will-change: transform, box-shadow, filter;
  position: relative;
  overflow: hidden;
}
#logoMorphLoader .lml-logo::before{
  content:'';
  position: absolute;
  inset:0;
  background: radial-gradient(400px circle at 30% 30%, rgba(255,255,255,.32), transparent 40%);
  animation: logoShine 2s ease-in-out infinite;
  will-change: transform;
}
@keyframes logoMorph{
  0%, 100%{ transform: scale(1) rotate(0); border-radius: 20px; filter: brightness(1); }
  25%{ transform: scale(1.05) rotate(2deg); border-radius: 24px; filter: brightness(1.1); }
  50%{ transform: scale(1) rotate(0); border-radius: 20px; filter: brightness(1); }
  75%{ transform: scale(1.05) rotate(-2deg); border-radius: 28px; filter: brightness(1.1); }
}
@keyframes logoShine{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(100%); }
}
#logoMorphLoader .lml-text{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#logoMorphLoader .lml-title{
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: -.03em;
  color: var(--text);
}
#logoMorphLoader .lml-subtitle{
  font-size: .82rem;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 8px;
}
#logoMorphLoader .lml-subtitle .dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--up);
  animation: premiumPulseDot 1.5s ease infinite;
}
#logoMorphLoader .lml-progress{
  width: 120px;
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}
#logoMorphLoader .lml-progress .bar{
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  transform-origin: left;
  transform: scaleX(0);
  animation: lmlProgress 2s cubic-bezier(.16,1,.3,1) forwards;
  will-change: transform;
}
@keyframes lmlProgress{
  0%{ transform: scaleX(0); }
  100%{ transform: scaleX(1); }
}

/* ==================== ENSURE NO JUMP ==================== */

#heroStatsBar, #heroTrustBadges, #heroLogoWall, #floatedBottomBar, #logoMorphLoader, .empty-state{
  contain: layout style paint;
}