/* ═══════════════════════════════════════════════════════════════════
   ShukWAY · Empty States
   Friendly, centered messaging when there's no data to show.
   ═══════════════════════════════════════════════════════════════════ */

.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:var(--sp-10) var(--sp-6);
  min-height:200px;
}

.empty-state-icon{
  font-size:48px;
  margin-bottom:var(--sp-4);
  opacity:0.7;
}

.empty-state-title{
  font-size:var(--text-lg);
  font-weight:var(--fw-medium);
  color:var(--ink-soft);
  margin-bottom:var(--sp-2);
}

.empty-state-sub{
  font-size:var(--text-sm);
  color:var(--muted);
  max-width:320px;
  line-height:1.6;
  margin-bottom:var(--sp-4);
}

.empty-state .btn{
  margin-top:var(--sp-2);
}

@media(max-width:480px){
  .empty-state{padding:var(--sp-6) var(--sp-4);min-height:150px}
  .empty-state-icon{font-size:36px}
  .empty-state-title{font-size:var(--text-base)}
}